@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: #94c255 url(../../milktree/img/bg_puzzle_pc.jpg) no-repeat 50% top;
	overflow: hidden;
}
#content .inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 4.9em;
}
#content h1 {
	left: 0;
	z-index: 3;
	width: 613px;
	height: 10.7%;
	padding-top: 8%;
	margin-left: 19.4%;
}
#content h1 .l1 {
	position: relative;
	width: 25.626%;
	margin-right: -8%;
}
#content h1 img,
#content p.lead img{
	width: 100%;
	margin-right: 0;
}
#content h2 {
	position: relative;
	z-index: 1;
	width: 194px;
	position: absolute;
	margin: 1.25% 1.3% 0 0;
	filter: drop-shadow(0em 0.2em 0.2em rgba(0, 0, 0, 0.5));
	position: absolute;
	right: -17px;
	top: 7px;
}
#content h2 a {
	display: block;
}
#content h2 img {
	position: absolute;
	left: 0;
	animation: tlatt 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
#content h2 .en {
	width: 52%;
	margin: 0 0 0 22.8%;
	animation: none;
}
#content h2 .c1 {
	width: 16.62%;
	margin: 8.6% 0 0 -1.2%;
	z-index: 6;
}
#content h2 .c2 {
	width: 19.08%;
	margin: 8.4% 0 0 11%;
	z-index: 5;
	animation-delay: .2s;
}
#content h2 .c3 {
	width: 16.925%;
	margin: 7.9% 0 0 26.5%;
	z-index: 4;
	animation-delay: .4s;
}
#content h2 .c4 {
	width: 19.08%;
	margin: 6.58% 0 0 40.2%;
	z-index: 3;
	animation-delay: .6s;
}
#content h2 .c5 {
	width: 15.693%;
	margin: 8.4% 0 0 55.7%;
	z-index: 2;
	animation-delay: .8s;
}
#content h2 .c6 {
	width: 14.77%;
	margin: 10.8% 0 0 68.2%;
	z-index: 1;
	animation-delay: 1s;
}
#content h2 .c7 {
	width: 18.465%;
	margin: 6.6% 0 0 79.8%;
	z-index: 0;
	animation-delay: 1.2s;
}
@keyframes tlatt {
	0%, 40%, 100% {
		transform: scale(1)
	}
	10%,
	12% {
		transform: scale(1.2)
	}
	24% {
		transform: scale(0.9)
	}
}
#content p.lead {
	font-family: fontn;
	color: #fff;
	margin: 0.7% 0 11.3% 19.1%;
	line-height: 1.65em;
	text-align: left;
	width: 608px;
}
#content a.hint{
	position:absolute;
	display: block;
	right: 0;
	top: 4.7em;
	margin: 17.9% -2.2% 0 0;
	z-index:2;
	cursor:pointer;
}
#content a.hint.fix{
	animation: hintfly 4.2s infinite cubic-bezier(0.46, 0.02, 0.54, 0.94);
}
#content a.hint.up{
	top:0;
	transform:top 1s cubic-bezier(0.4, 0.08, 0.25, 1) !important;
}
@keyframes hintfly {
   0%,100%{
      transform: translateY(-.3em); 
   }
   50%{
      transform: translateY(.3em); 
   }
}
#content a.hint .arrow{
	position:absolute;
	left:0;
	top:0;
	margin: 32.7% 0 0 37%;
	width: 3em;
	transform-origin: 40% 40%;
}
#content a.hint img{
	transition:.2s;
}
#content a.hint:hover .arrow{
	transform:scale(1.1);
}
#content a.hint:hover  img{
	filter:brightness(1.15);
}
/*============================
#ctsTree
============================*/
#ctsTree span.cut{
	margin: 0 -0.4em;
	display:inline-block;
}
div#ctsTree {
	position: relative;
	width: 100%;
	height: 50em;
	font-family: fontn;
	color: #000;
	margin-left: -13px;
	margin-bottom: 4.3%;
}
#content *{
	user-select:none;
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
#ctsTree li {
	position: absolute;
	top: 0;
	left: 0;
}
#ctsTree .popup {
	cursor:pointer;
	animation: attend 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
@keyframes attend {
	0%, 40%, 100% {
		transform: scale(1)
	}
	10%,
	12% {
		transform: scale(1.2)
	}
	24% {
		transform: scale(0.9)
	}
}
#ctsTree small {
	line-height: 1.2;
	display: block;
}
#ctsTree .sub_f1 {
	margin: 27.6% 0 0 19.8%;
}
#ctsTree .sub_f2 {
	margin: 14.6% 0 0 39.9%;
}
#ctsTree .sub_f3 {
	margin: 6.5% 0 0 60.9%;
}
#ctsTree .subf {
	position:absolute;
    transform-origin: 50% 10%;
	left: 0;
	top: 0;
	width: 3.9%;
}
#ctsTree .course {
	position: absolute;
	width: 79.4%;
	height: 87.53%;
	left: 0;
	top: 0;
	margin: 7.4% 0 0 12.1%;
	background: url(../../milktree/img/bg_course.png?s) no-repeat;
	background-size: contain;
	transform-origin: 50% 110%;
	pointer-events: none;
}

#ctsTree .st {
	position: absolute;
	margin: 53.4% 0 0 47.9%;
	width: 5.858em;
}
#ctsTree .st img,
#ctsTree .sub_c img{
	width:100%;
}
#ctsTree .sub_c {
	text-shadow: 2px 2px 0px #804430, -2px 2px 0px #804430, 2px -2px 0px #804430, -2px -2px 0px #804430, 1px 1px 0px #804430, -1px 1px 0px #804430, 1px -1px 0px #804430, -1px -1px 0px #804430, 2.5px 0px 1px #804430, 0px 2.5px 1px #804430, -2.5px 0px 1px #804430, 0px -2.5px 1px #804430, 2.8px 0px 1px #804430, 0px 2.8px 1px #804430, -2.8px 0px 1px #804430, 0px -2.8px 1px #804430;
	color: #fff;
	font-size: 1.3em;
	letter-spacing: 0.04em;
	filter: drop-shadow(0em 0.02em 0.03em rgba(0, -0.1, 0, 0.2));
}
#ctsTree .s1 {
	margin: 36.4% 0 0 56.6%;
	width: 3.737em;
}
#ctsTree .s2 {
	margin: 43% 0 0 57.1%;
	width: 3.462em;
}
#ctsTree .s3 {
	margin: 40.2% 0 0 27.4%;
	letter-spacing: 0.08em;
}
#ctsTree .main_c {
	color: #ff6000;
	text-align: center;
	font-size: 1.3em;
	letter-spacing: 0.1em;
	/* font-family: fontb; */
	line-height: 1.25;
	filter: drop-shadow(0em 0.12em 0.15em rgba(0, -0.1, 0, 0.3));
	z-index: 2;
	position: relative;
}
#ctsTree .main_c li img{
	width: 100%;
}
#ctsTree .m1 {
	margin: 39.9% 0 0 44.4%;
	width: 3.077em;
}
#ctsTree .m2 {
	margin: 42.8% 0 0 63.3%;
	width: 5.055em;
}
#ctsTree .m3 {
	margin: 37.3% 0 0 16.1%;
	width: 2.583em;
}
#ctsTree .m4 {
	margin: 34.4% 0 0 31.6%;
	width: 3.242em;
}
#ctsTree .m5 {
	margin: 15.5% 0 0 34.2%;
	width: 2.693em;
}
#ctsTree .m6 {
	margin: 14.2% 0 0 59%;
	width: 3.132em;
}
#ctsTree .m7 {
	margin: 18.1% 0 0 66.9%;
	width: 3.077em;
}
#ctsTree .m8 {
	margin: 30.8% 0 0 72.1%;
	width: 6.154em;
}
#ctsTree .m9 {
	margin: 40% 0 0 80.5%;
	width: 3.022em;
}
#ctsTree .m10 {
	margin: 22.4% 0 0 23.1%;
	width: 2.528em;
}
#ctsTree .m11 {
	margin: 42.6% 0 0 52.2%;
	width: 2.583em;
}
#ctsTree .m12 {
	margin: 49.8% 0 0 49.2%;
	width: 2.638em;
}
#ctsTree .m13 {
	margin: 24.6% 0 0 37%;
	width: 4.121em;
}
#ctsTree .blue {
	color: #00acff;
}
#ctsTree .narrow {
}
#ctsTree .fluit li {
	background: url(../../milktree/img/obj_fruit.png) no-repeat;
	background-size: contain;
	width: 5.8em;
	height: 4.1em;
	padding-top: 1.6em;
	text-align: center;
	font-family: fontb;
	line-height: 1.35;
	transform-origin: 50% 10%;
}
#ctsTree .fluit.pika li.empty {
	animation: pika 1.2s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
@keyframes pika {
	0%, 50% {
		filter: brightness(1.07)
	}
	50.1%, 100% {
		filter: brightness(1)
	}
}
#ctsTree .fluit li.fix{
	cursor:move;
}
.result #ctsTree .fluit li.fix{
	cursor:auto;
}
#ctsTree .fluit li.fall{
	animation: fall 0.7s cubic-bezier(0.36, -0.01, 0.45, 0.09);
	animation-fill-mode: forwards;
	animation-delay:.24s;
}
#ctsTree .fluit .f13.fall,
#ctsTree .fluit .f8.fall,
#ctsTree .fluit .f6.fall,
#ctsTree .fluit .f7.fall{
	animation: fall 0.8s cubic-bezier(0.36, -0.01, 0.45, 0.09);
	animation-fill-mode: forwards;
	animation-delay:.01s;
}
#ctsTree .fluit .f1.fall,
#ctsTree .fluit .f11.fall,
#ctsTree .fluit .f4.fall{
	animation: fall 0.5s cubic-bezier(0.36, -0.01, 0.45, 0.09);
	animation-fill-mode: forwards;
	animation-delay:.1s;
}
#ctsTree .fluit li.fall img:first-child{
	opacity:0;
}
@keyframes fall {
   0%{
     filter: brightness(1);
   }
   20%{
     filter: brightness(0.8);
   }
   80%{
      margin-top: 63.1%;
	  filter: brightness(0.8);
   }
   90%{
      margin-top: 62.1%;
	  filter: brightness(0.8);
   }
   100%{
      margin-top: 63.1%;
	  filter: brightness(0.8);
   }
}
#ctsTree .fluit li img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);opacity: 2;pointer-events: none;}
#ctsTree .fluit li img:first-child{
	transform: translate(-50%, -100%);
}
#ctsTree .f1 {
	margin: 35.5% 0 0 36.9%;
}
#ctsTree li.f2 {
	margin: 38.4% 0 0 20.3%;
	font-size: 0.94em;
}
#ctsTree li.f2 img{
	width: 3.8em;
	margin: 29.5% 0 0 0%;
}
#ctsTree li.f2 small {
	font-size: 0.8em;
}
#ctsTree li.f3 {
	margin: 39.2% 0 0 72.7%;
	font-size: 0.95em;
}
#ctsTree li.f3 img{
	width: 3.228em;
	margin: 31.8% 0 0 0.3%;
}
#ctsTree li.f4 {
	margin: 29.8% 0 0 10.1%;
}
#ctsTree li.f5 {
	margin: 26% 0 0 25.9%;
}
#ctsTree li.f6 {
	margin: 6.9% 0 0 30.5%;
}
#ctsTree li.f7 {
	margin: 5% 0 0 57.4%;
}
#ctsTree li.f8 {
	margin: 9.2% 0 0 66.6%;
}
#ctsTree li.f9 {
	margin: 14.7% 0 0 75.5%;
}
#ctsTree li.f10 {
	margin: 23.3% 0 0 82.4%;
}
#ctsTree li.f11 {
	margin: 34.6% 0 0 85.4%;
}
#ctsTree li.f12 {
	margin: 13.6% 0 0 19.5%;
}
#ctsTree li.f13 {
	margin: 2.8% 0 0 46.9%;
}

#ctsTree .f1 img{
	margin: -30% 0 0 3.5%;
}
#ctsTree .f2 img{
	margin: -30% 0 0 0;;
}
#ctsTree .f3 img{
	margin: -30% 0 0 0;
}
#ctsTree .f4 img{
	margin: -33% 0 0 -3.5%;
}
#ctsTree .f5 img{
	margin: -28% 0 0 20%;
}
#ctsTree .f6 img{
	margin: -32% 0 0 0;
}
#ctsTree .f7 img{
	margin: -32% 0 0 2%;
}
#ctsTree .f8 img{
	margin: -34.4% 0 0 4%;
}
#ctsTree .f9 img{
	margin: -32% 0 0 3%;
}
#ctsTree .f10 img{
	margin: -35.1% 0 0 0;
}
#ctsTree .f11 img{
	margin: -30% 0 0 0;
}
#ctsTree .f12 img{
	margin: -31.4% 0 0 0;
}
#ctsTree .f13 img{
	margin: -33.4% 0 0 3%;
}

#ctsTree .fluit .milk{
	width: 4.353em;
}
#ctsTree .fluit .fcream{
	width: 5.93em;
}
#ctsTree .fluit .condecemilk{
	width: 3.782em;
}
#ctsTree .fluit .pcheese{
	width: 4.918em;
}
#ctsTree .fluit .ncheese{
	width: 5.638em;
}
#ctsTree .fluit .butter{
	width: 4.139em;
}
#ctsTree .fluit .freshcheese{
	width: 5.495em;
}
#ctsTree .fluit .creamcheeze{
	width: 4.566em;
}
#ctsTree .fluit .yogurt{
	width: 5.712em;
}
#ctsTree .fluit .bmp{
	width: 6.71em;
}
#ctsTree .fluit .skim{
	width:4.0em
}

#ctsTree .fluit .i_milk{
	margin: 2% 0 0 0;
}
#ctsTree .fluit .i_fcream{
	margin: 3% 0 0 5%;
}
#ctsTree .fluit .i_condecemilk{
	margin: 4% 0 0 6%;
}
#ctsTree .fluit .i_pcheese{
	margin: -2% 0 0 -2.5%;
}
#ctsTree .fluit .i_ncheese{
	margin: 1% 0 0 -9%;
}
#ctsTree .fluit .i_butter{
	margin: 1% 0 0 -1%;
	width: 86%;
}
#ctsTree .fluit .i_freshcheese{
	margin: 1.2% 0 0 0%;
	width: 79%;
}
#ctsTree .fluit .i_creamcheeze{
	margin: -0.7% 0 0 1%;
}
#ctsTree .fluit .i_yogurt{
	margin: 6% 0 0 2%;
	width: 83%;
}
#ctsTree .fluit .i_bmp{
	margin: 0% 0 0 -2.5%;
}
#ctsTree .fluit .i_skim{
	margin: 4.4% 0 0 -1%;
}

#ctsTree .expo {
	text-align: center;
}
#ctsTree .expo h3 {
	position: relative;
	font-family: fontb, sans-serif, 'Noto Sans JP';
	color: #ff6b00;
	font-size: 1.85em;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-weight: normal;
	display: inline-block;
	margin: 1.65em 0.2em 0.1em 0;
	border-radius: 1em;
	white-space: nowrap;
	transform: scale(0.8);
	opacity: 0;
	transition: 0.3s cubic-bezier(0.25, 1.01, 0.48, 1.01);
	transition-delay: 0.35s;
}
#ctsTree .expo small {
	position: absolute;
	top: -0.8em;
	font-family: fontn;
	font-size: 0.43em;
	width: 110%;
	margin-left: -5%;
	letter-spacing: 0;
	text-indent: -0.4em;
}
#ctsTree .expo p {
	position: relative;
	margin: -0.3em 0 0 -0.4em;
	line-height: 1.6;
	font-family: fontb, sans-serif, 'Noto Sans JP';
	color: #000;
	font-size: 1em;
	letter-spacing: 0.01em;
	opacity: 0;
	transition: opacity 0.4s;
	transition-delay: 0.4s;
}
#ctsTree .expo li {
	/* width: 17.7%; */
	/* height: 26.4%; */
	/* transition: .2s; */
	/* transition-delay: .1s; */
	transform: scale(0);
	z-index: 8;
	pointer-events: none;
}
#ctsTree .expo li .m1{
	position:absolute;
	width: 2.358em;
	margin: 82.5% 0 0 75.9%;
	top: 0;
	left: 0;
}
#ctsTree .expo li.e2 .m1{
	margin: 86.5% 0 0 13.9%;
}
#ctsTree .expo li.e3 .m1{
	margin: 8.5% 0 0 9.9%;
}
#ctsTree .expo li.e4 .m1{
	margin: 2.5% 0 0 6.9%;
}
#ctsTree .expo li.e5 .m1{
	margin: 80.2% 0 0 82.2%;
}
#ctsTree .expo li.e6 .m1{
	margin: 7% 0 0 77.9%;
}
#ctsTree .expo li.e7 .m1{
	margin: 83.5% 0 0 78.9%;
}
#ctsTree .expo li.e8 .m1{
	margin: 85.5% 0 0 15.9%;
}
#ctsTree .expo li.e9 .m1{
	margin: 86.5% 0 0 16.6%;
}
#ctsTree .expo li.e10 .m1{
	margin: 84.5% 0 0 14.9%;
}
#ctsTree .expo li.e11 .m1{
	margin: 23.5% 0 0 88.9%;
}
#ctsTree .expo li .m2{
	position:absolute;
	width: 1.5em;
	margin: 96.8% 0 0 89.3%;
	top: 0;
	left: 0;
}
#ctsTree .expo li.e2 .m2{
	margin: 94.8% 0 0 10.5%;
}
#ctsTree .expo li.e3 .m2{
	margin: 4.8% 0 0 2.5%;
}
#ctsTree .expo li.e4 .m2{
	margin: -7.2% 0 0 -0.5%;
}
#ctsTree .expo li.e5 .m2{
	margin: 90.8% 0 0 91.5%;
}
#ctsTree .expo li.e6 .m2{
	margin: 0.8% 0 0 88.5%;
}
#ctsTree .expo li.e7 .m2{
	margin: 96.6% 0 0 87.5%;
}
#ctsTree .expo li.e8 .m2{
	margin: 97.8% 0 0 13.5%;
}
#ctsTree .expo li.e9 .m2{
	margin: 97.2% 0 0 10.1%;
}
#ctsTree .expo li.e10 .m2{
	margin: 96.8% 0 0 10.5%;
}
#ctsTree .expo li.e11 .m2{
	margin: 16.8% 0 0 100.5%;
}
#ctsTree .e3 h3 {
	margin: 1.4em 0em 0.1em -0.2em;
	letter-spacing: 0.1em;
}
#ctsTree .e3 small {
	letter-spacing: 0.2em;
	text-indent: 0;
}
#ctsTree .arrow {
	text-align: center;
	position: absolute;
	background: url(../../milktree/img/arrow_serif.png) no-repeat;
	background-size: contain !important;
	width: 2.32em;
	height: 4.36em;
	top: 0;
	left: 0;
	margin: 69% 0 0 6%;
	transform: rotate(27deg);
}
#ctsTree .e1 .arrow {
	margin: -5.9% 0 0 4.8%;
	transform: rotate(141deg);
}
#ctsTree .e2 .arrow {
	margin: 15.4% 0 0 83.8%;
	transform: rotate(241deg);
}
#ctsTree .e3 .arrow {
	margin: 24.1% 0 0 92%;
	transform: rotate(-99deg);
}
#ctsTree .e4 .arrow {
	margin: 59.7% 0 0 -6.6%;
	transform: rotate(65deg);
}
#ctsTree .e5 .arrow {
	margin: 7.1% 0 0 0.3%;
	transform: rotate(133deg);
}
#ctsTree .e6 .arrow {
	margin: 30.1% 0 0 89.8%;
	transform: rotate(-76deg);
}
#ctsTree .fkds {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../../milktree/img/fkds_s1.png) no-repeat;
	background-size: contain !important;
	left: 0;
	transform: scale(0);
	transition: 0.65s cubic-bezier(0.21, 1.56, 0.6, 0.89);
	transition-delay: 0.15s;
}
#ctsTree .e2 .fkds {
	background: url(../../milktree/img/fkds_s2.png) no-repeat;
}
#ctsTree .e4 .fkds {
	background: url(../../milktree/img/fkds_s0.png) no-repeat;
}
#ctsTree .e5 .fkds {
	background: url(../../milktree/img/fkds_s3.png) no-repeat;
}
#ctsTree .e1 {
	margin: 24.5% 0 0 49.7%;
}
#ctsTree li.e2 {
	margin: 6.8% 0 0 30.1%;
	transform-origin: 102.5% 24%;
}
#ctsTree li.e3 {
	margin: 14.9% 0 0 34.5%;
	transform-origin: 116.5% 38%;
}
#ctsTree .e2 h3 {
	margin: 2.05em 0em 0.1em -0.6em;
	letter-spacing: 0.1em;
}
#ctsTree .e2 p {
	margin: -0.2em 0 0 -1em;
}
#ctsTree li.e4 {
	margin: 16.7% 0 0 60.4%;
	width: 15.5%;
	height: 22.1%;
	transform-origin: -14.5% 88%;
}
#ctsTree .e4 h3 {
	margin: 1.45em 0.2em 0.15em 0;
	letter-spacing: 0.16em;
}
#ctsTree .e4 p {
	margin-left: 1%;
}
#ctsTree li.e5 {
	margin: 6.3% 0 0 51.9%;
	transform-origin: -2.5% 10%;
}
#ctsTree .e5 h3 {
	margin: 1.73em 0.2em 0.1em 0;
}
#ctsTree .e5 p {
	margin-left: 1%;
}
#ctsTree li.e6 {
	margin: 23.1% 0 0 2.2%;
}
#ctsTree li.e7 {
	margin: 2.8% 0 0 18.8%;
}
#ctsTree li.e8 {
	margin: 15.8% 0 0 42.5%;
}
#ctsTree li.e9 {
	margin: 25.5% 0 0px 47.8%;
}
#ctsTree li.e10 {
	margin: 20.6% 0 0 50.9%;
}
#ctsTree li.e11 {
	margin: 15.9% 0 0 42.1%;
}
#ctsTree .e6 h3 {
	margin: 1.55em -0.1em 0.1em 0;
	letter-spacing: 0.15em;
}
#ctsTree .e6 p {
	margin-left: 0.7%;
}
#ctsTree .expo li.pop,
#ctsTree .expo li.pop .fkds,
#ctsTree .expo li.pop p {
	transform: scale(1);
	opacity: 1;
}
#ctsTree .expo li.pop h3 {
	transform: scale(.8);
	opacity: 1;
}
#content a.return_o {
	position: relative;
	display: inline-block;
	background: #00a03c;
	color: #fff;
	font-family: fontn;
	border: #fff 3px solid;
	border-radius: 1.4em;
	padding: 0.31em 1.2em;
	font-size: 1.15em;
	letter-spacing: .02em;
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .4);
	transition: .2s;
	margin: 4.8% 0 7.4% 2.2%;
}
#content a.return:hover{
	text-decoration: none;
}
#content .obj{
	position:absolute;
	left:0;
	top:0;
}
#content .family{
	margin: 68.5% 0 0 12.6%;
}
#content .caw1{
	margin: 60.8% 0 0 -39.6%;
}
#content .caw2{
	margin: 130.4% 0 0 75.5%;
	width: 45%;
}
#content .caw3{
	margin: 75.8% 0 0 25.7%;
}
#content .caw4{
	margin: 70.9% 0 0 96.3%;
}
#content .caw5{
	margin: 80% 0 0 72.8%;
}
#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;
}
#ctsTree.ready .sppop {
	animation:spatt 1.6s cubic-bezier(0.4, 0, 0.5, 1) infinite;
	pointer-events:all;
}

@charset "utf-8";
/* CSS Document */

/*============================
#puzzle_bg
============================*/
#puzzle_bg {
  position: absolute;
  left: 0;
  top: 1.2em;
  height: 100%;
  width: 100%;
}
#puzzle_bg .clearbg1 {
  position: absolute;
  width: 1920px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  margin-top: 1.3%;
}
#puzzle_bg .clearbg2 {
  position: absolute;
  width: 1920px;
  left: 50%;
  top: -1.2em;
  transform: translateX(-50%);
  opacity: 0;
  transform-origin: 50% 100%;
}
#puzzle_bg .tree {
  position: absolute;
  top: 0;
  left: 0;
  margin: 27.1% 0 0 0.1%;
  width: 1000px;
  transform-origin: 50% 100%;
}

#puzzle_bg .clearbg1.anm {
  animation: bring infinite 1.2s cubic-bezier(0.34, 0.06, 0.68, 0.95);
}

@keyframes bring {
	0%, 100% {
		opacity:0
	}
	50% {
		opacity:1
	}
}
#puzzle_bg .clearbg1_2.anm{
animation: bring2 infinite 1.2s cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
@keyframes bring2 {
	0%, 100% {
		opacity:1
	}
	50% {
		opacity:0
	}
}

#puzzle_bg .clearbg2.anm{
	animation: bring3 infinite 1s cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
@keyframes bring3 {
	0%, 50% {
		transform: translateX(-50%) rotate(0deg) scale(1);
	}
	50.1%, 100% {
		transform: translateX(-50%) rotate(-3.5deg) scale(1.1);
	}
}

.miss #puzzle_bg .tree {
	animation: gasa .7s cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
.miss #ctsTree .course {
	animation: gasa .7s cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
@keyframes gasa {
   20%{
      transform: skewX(-.8deg) rotate(.3deg); 
   } 
   40%{
      transform: skewX(.8deg) rotate(-.3deg); 
   }
   60%{
      transform: skewX(-.5deg); 
   }
   80%{
      transform: skewX(.5deg); 
   }
   100%{
      transform: skewX(0deg); 
   }
}
#puzzle_bg h3.clearmes {position: absolute;left: 0;top: 0;z-index: 1;margin: 26.7% 0 0 1.7%;width: 975px;display: none;pointer-events: none;transform-origin: 50% 120%;}
#puzzle_bg h3.clearmes.anm{
animation: obifly 3s infinite cubic-bezier(0.46, 0.04, 0.57, 0.94);
}
@keyframes obifly {
   0%,100%{
      transform: translateY(-.2em); 
   }
   50%{
      transform: translateY(.4em); 
   }
}
#puzzle_bg h3 img {
	width:100%;
}
#puzzle_bg .bird{
    position: absolute;
    left: 0;
    top: 0;
    width: 8.2%;
    z-index: 2;
    display: none;
}
#puzzle_bg .b1.anm img{
animation: fly 1.6s infinite cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
@keyframes fly {
   0%,100%{
      transform: translateY(-.5em); 
   }
   50%{
      transform: translateY(.5em); 
   }
}
#puzzle_bg .b2.anm img{
animation: fly2 1.6s infinite cubic-bezier(0.34, 0.06, 0.68, 0.95);
}
@keyframes fly2 {
   0%,100%{
      transform: translateY(.5em); 
   }
   50%{
      transform: translateY(-.5em); 
   }
}
#puzzle_bg .bird img{
	width:100%;
}
#puzzle_bg.c11 .bird.b1,
#puzzle_bg.c10 .bird.b1{margin: 26.7% 0 0 1.7%;}
#puzzle_bg.c11 .bird.b2,
#puzzle_bg.c10 .bird.b2{margin: 27.2% 0 0 90.1%;}
#puzzle_bg .bird.b1 {margin: 29.4% 0 0 8.2%;}
#puzzle_bg .bird.b2 {margin: 29.1% 0 0 83.1%;}
#puzzle_bg.c5 .bird.b1,
#puzzle_bg.c6 .bird.b1,
#puzzle_bg.c7 .bird.b1{margin: 29.1% 0 0 4.8%;}
#puzzle_bg.c5 .bird.b2,
#puzzle_bg.c6 .bird.b2,
#puzzle_bg.c7 .bird.b2{margin: 29.1% 0 0 87.1%;}

/*============================
#puzzle_piece
============================*/
div#puzzle_piece {position: absolute;z-index: 1;bottom: 0;width: 104.7%;margin-left: -2.6%;margin-bottom: 27.7%;display: flex;justify-content: space-between;}
#puzzle_piece .box.leftBox {
}
#puzzle_piece .box {width: 43.122%;background: rgb(255 255 255 / 90%);border-radius: 1.4em;border: #009e38 3px solid;box-sizing: border-box;height: 11.6em;box-shadow: rgb(0 0 0 / 30%) 0.4em 0.2em 0.7em;}
#puzzle_piece .box h3 {width: 13.715em;margin: -5% auto 1%;padding-left: 1.6%;}
#puzzle_piece .box h3 img{width:100%;}
#puzzle_piece .box ul {display: flex;justify-content: center;}
#puzzle_piece .box li{
	width: 18.2%;
	position: relative;
	justify-content: left;
	cursor: move;
}
#puzzle_piece .box .pika li:not(.fix){
	animation: pika 1.2s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
#puzzle_piece .box li.graving{
	cursor: grabbing;
	cursor: -webkit-grabbing;
	pointer-events:none;
}
#puzzle_piece .box li.graving *{
	pointer-events:none;
}
#puzzle_piece .box li.graving img:first-child,
#puzzle_piece .box li.graving img.forsp{
	opacity:0;
	transition:0s;
}
#puzzle_piece .box li.graving img:last-child{
	transform: translate(-120%, -70%) scale(1.5)!important;
	margin:0;
	transition:0s;
}
#puzzle_piece .box.leftBox li{
	width: 18.2%;
}
#puzzle_piece .box li.fix{
	filter: grayscale(1);
	pointer-events: none;
	transition: 0s !important;
	opacity: 0.5 !important;
}
#puzzle_piece .box li.fix img{
	transition: 0s !important;
}
#puzzle_piece .box li img:first-child{margin-top: 5.2em;pointer-events: none;transition: .3s;transition-delay: .2s;}
#puzzle_piece .box li img:last-child{
	position:absolute;
	margin: 0;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	transition: .3s;
}
#puzzle_piece .box li.f13 .milk {
  width: 3.9em;
  margin: 4.7em 0 0 0;
}
#puzzle_piece .box li.f13 .i_milk {
  width: 3.1em;
}
#puzzle_piece .box li.f9 .fcream {
  width: 6em;
  margin: 4.3em 0 0 -0.1em;
}
#puzzle_piece .box li.f9 .i_fcream {
  margin: -3.7% 0 0 0.5%;
}
#puzzle_piece .box li.f7 .condecemilk {
  width: 3.4em;
  margin: 4.45em 0 0 14.1%;
}
#puzzle_piece .box li.f7 .i_condecemilk {
  margin: -2.7% 0 0 4%;
}
#puzzle_piece .box li.f12 .pcheese {
  width: 5em;
  margin: 5.1em 0 0 -10.5%;
}
#puzzle_piece .box li.f12 .i_pcheese {
  margin: 15.3% 0 0 -6%;
}
#puzzle_piece .box li.f5 .ncheese {
  width: 5.7em;
  margin: 5em 0 0 4.5%;
}
#puzzle_piece .box li.f5 .i_ncheese {
  margin: 16.3% 0 0 1%;
}
#puzzle_piece .box li.f10 .butter {
  width: 4.1em;
  margin: 5.2em 0 0 -3.5%;
}
#puzzle_piece .box li.f10 .i_butter {
  margin: 19% 0 0 -4%;
  width: 85.9%;
}
#puzzle_piece .box li.f1 .freshcheese {
  width: 5.4em;
  margin: 5.1em 0 0 -5.5%;
}
#puzzle_piece .box li.f1 .i_freshcheese {
  margin: 20.3% 0 0 -5%;
  width: 79%;
}
#puzzle_piece .box li.f8 .creamcheeze {
  width: 4.8em;
  margin: 5em 0 0 15.5%;
}
#puzzle_piece .box li.f8 .i_creamcheeze {
  margin: 3.3% 0 0 7%;
}
#puzzle_piece .box li.f6 .yogurt {
  width: 5.7em;
  margin: 5.1em 0 0 5.5%;
}
#puzzle_piece .box li.f6 .i_yogurt {
  margin: 17.3% 0 0 6.4%;
  width: 83.3%;
}
#puzzle_piece .box li.f4 .bmp {
  width: 6.3em;
  margin: 4.5em 0 0 0.6%;
}
#puzzle_piece .box li.f4 .i_bmp {
  margin: -4.7% 0 0 3.2%;
}
#puzzle_piece .box li.f11 .skim {
  width: 4em;
  margin: 5em 0 0 -13.4%;
}
#puzzle_piece .box li.f11 .i_skim {
  margin: 9.5% 0 0 -9%;
}

/*============================
#puzzle_howto
============================*/
#puzzle_howto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}
#puzzle_howto .bg {
  background: rgb(255 255 255 / 80%);
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 100%;
}
#puzzle_howto .textBox {
  background: #fff;
  width: 72.6%;
  margin: 17.5% auto 0;
  border-radius: 1.4em;
  border: #009e38 3px solid;
  box-sizing: border-box;
  box-shadow: rgb(0 0 0 / 30%) 0.4em 0.2em 0.7em;
  position: relative;
}
#puzzle_howto .textBox h3 {
  margin: 4.4% 0 1.8% 2.6%;
}
#puzzle_howto .textBox p {
  margin: 1.3% 0 2% -0.7%;
}
#puzzle_howto .textBox a {
  margin: 4.7% 0 5.1%;
  display: block;
  cursor: pointer;
}
#puzzle_howto .textBox .obj {
}
#puzzle_howto .textBox .obj1 {
  position: absolute;
  left: 0;
  top: 0;
  margin: 37.1% 0 0 6.8%;
}
#puzzle_howto .textBox .obj2 {
  margin: 4% 0 0 10.8%;
  width: 6.3em;
}
#puzzle_howto .textBox .obj3 {
  margin: 9.3% 0 0 5.8%;
  width: 4.2em;
}
#puzzle_howto .textBox .obj4 {
  margin: 4.4% 0 0 80%;
  width: 5.2em;
}
#puzzle_howto .textBox .obj5 {
  margin: 8.4% 0 0 85.3%;
  width: 5.3em;
}
#puzzle_howto .textBox .obj6 {
  margin: 37.6% 0 0 81.3%;
  width: 5em;
}
#puzzle_howto .textBox .obj7 {
  margin: 44.2% 0 0 88.7%;
}
#content a.button {
  display: block;
  width: 18.286em;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transition: opacity 0.4s, filter 0.4s;
}
#content a.button.return {
  margin: 0.9% auto 0;
}
#content a.button.retry {
  display: none;
}
#content a.button.void {
  opacity: 0.3;
  pointer-events: none;
}
#content a.button img,
#puzzle_howto .textBox a:hover img {
  transition: 0.2s;
}
#content a.button img {
  width: 100%;
}
#puzzle_howto .textBox a:hover img,
#content a.button:hover img {
  filter: brightness(1.3);
}


@keyframes spatt {
	0%,60%, 100% {
		color:#ff6000;
	}
	70%,90%{
		color:#ffad30;
    }
}

@media all and (-ms-high-contrast:none){
	#ctsTree li.f1{
		padding-top:2em;
	}
	#ctsTree li.f2,
	#ctsTree li.f3{
		padding-top:1.2em;
	}
	#ctsTree li.f4{
		padding-top:1.4em;
	}
	#ctsTree li.f5{
		padding-top:2.2em;
	}
	#ctsTree li.f6{
		padding-top:2.8em;
	}
	#ctsTree li.f13,
	#ctsTree li.f7{
		padding-top:1.1em;
	}
	#ctsTree li.f8{
		padding-top:1.8em;
	}
	#ctsTree li.f9{
		padding-top:2.4em;
	}
	#ctsTree li.f10{
		padding-top:1.7em;
	}
	#ctsTree li.f11{
		padding-top:1.4em;
	}
	#ctsTree li.f12{
		padding-top:1.9em;
	}
	#ctsTree .main_c li,
	#ctsTree .sub_c li{
		top:.5em;
	}
	#ctsTree .expo small {
		top: -1.1em;
	}
	#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;
	}
	#stage #content {
		background: #5f96fb url(../../milktree/img/bg_puzzle_sp.jpg) no-repeat center top;
		background-size: 100%;
		background-position: 50% -81%;
		font-size: 1.9022vw;
	}
	#content .inner {
		width: 100%;
		padding-bottom: 5.4em;
	}
	#content .mvlogo {
		right: 0.5%;
		top: 0.6em;
		width: 33%;
	}
	#content h1{
		width: 95.8%;
		margin-left: 2.9%;
		padding-top: 15.1%;
	}
	#content p.lead{
		font-size: 1.72em;
		margin: 1% 0 16.2% 3.9%;
		line-height: 1.48em;
		width: 91.1%;
	}
	#content a.hint{
		margin: 50.5% 0% 0 0;
		width: 33.8%;
		top: 1.6em;
	}
	#content a.hint img{
		width:100%;
	}
	#content a.hint .arrow{
		margin: 33.6% 0 0 37.9%;
		width: 3.3em;
	}

	/*============================
	#puzzle_bg
	============================*/
	#puzzle_bg{
	  top: 4.2em;
	}
	#puzzle_bg .clearbg1 {
	  width: 100vw;
	}
	#puzzle_bg .clearbg2 {
	  width: 100vw;
	}
	#puzzle_bg h3.clearmes {
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index: 1;
	  margin: 59.2% 0 0 -2.1%;
	  width: 105.1%;
	  display: none;
	  pointer-events: none;
	  transform-origin: 50% 120%;
	  z-index: 3;
	}
	#puzzle_bg h3 img {
	  width: 100%;
	}
	#puzzle_bg.c10 h3 img,
	#puzzle_bg.c11 h3 img {
	  width: 90%;
	  margin-top: 1.3%;
	}
	#puzzle_bg .bird {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 8.2%;
	  z-index: 2;
	  display: none;
	}
	#puzzle_bg .bird img {
	  width: 100%;
	}
	#puzzle_bg.c11 .bird.b1,
	#puzzle_bg.c10 .bird.b1 {
	  margin: 60.7% 0 0 2.5%;
	}
	#puzzle_bg.c11 .bird.b2,
	#puzzle_bg.c10 .bird.b2 {
	  margin: 60.7% 0 0 89.5%;
	}
	#puzzle_bg .bird.b1 {
	  margin: 61.7% 0 0 5.4%;
	}
	#puzzle_bg .bird.b2 {
	  margin: 61.7% 0 0 86.1%;
	}
	#puzzle_bg.c5 .bird.b1,
	#puzzle_bg.c6 .bird.b1,
	#puzzle_bg.c7 .bird.b1 {
	 margin: 61.7% 0 0 2.2%;
	}
	#puzzle_bg.c5 .bird.b2,
	#puzzle_bg.c6 .bird.b2,
	#puzzle_bg.c7 .bird.b2 {
	 margin: 61.7% 0 0 90.1%;
	}

	
	div#ctsTree{width: 130%;margin: 13.7% 0 0 -16.6%;font-size: 1.03em;height: 50em;}
	#ctsTree .course {
		width: 80.4%;
		height: 73.73%;
		margin: 9.4% 0 0 19.7%;
		background: url(../../milktree/img/bg_course_sp.png?2) no-repeat;
		background-size: contain;
		transform-origin: 50% 110%;
	}
	#ctsTree .sub_f1 {
		margin: 20.2% 0 0 18.7%;
	}
	#ctsTree .sub_f2 {
	margin: 4.8% 0 0 37.6%;
	}
	#ctsTree .sub_f3 {
	margin: 6.7% 0 0 60.9%;
	}
	#ctsTree .st {
		margin: 52% 0 0 47.7%;
		font-size: 0.9em;
	}
	#ctsTree .sub_c {
		text-shadow: .1em .1em 0 #804430, -.1em .1em 0 #804430, .1em -.1em 0 #804430, -.1em -.1em 0 #804430, .05em .05em 0 #804430, -.05em .05em 0 #804430, .05em -.05em 0 #804430, -.05em -.05em 0 #804430, .125em 0 .05em #804430, 0 .125em .05em #804430, -.125em 0 .05em #804430, 0 -.125em .05em #804430, .13em 0 .05em #804430, 0 .13em .05em #804430, -.13em 0 .05em #804430, 0 -.13em .05em #804430;
	}
	#ctsTree .main_c {
		text-shadow: 0.12em 0.12em 0 #fff, -0.12em 0.12em 0 #fff, 0.12em -0.12em 0 #fff, -0.12em -0.12em 0 #fff, 0.075em 0.075em 0 #fff, -0.075em 0.075em 0 #fff, 0.075em -0.075em 0 #fff, -0.075em -0.075em 0 #fff, 0.18em 0 0.075em #fff, 0 0.18em 0.075em #fff, -0.18em 0 0.075em #fff, 0 -0.18em 0.075em #fff;
	}
	#ctsTree .main_c li{
		transform:rotate(.1deg);
		font-size: 1.08em;
	}
	#ctsTree .popup {
		/* pointer-events:none; */
	}
	#ctsTree .s1 {
		margin: 35.9% 0 0 55.6%;
		font-size: 1em;
	}
	#ctsTree .s2 {
		margin: 42.7% 0 -0.3px 56.1%;
		width: 3.562em;
	}
	#ctsTree .s3 {
		margin: 40.4% 0 0 28.6%;
		letter-spacing: 0.03em;
	}
	#ctsTree .m1 {
	    margin: 38.5% 0 0 45.4%;
	}
	#ctsTree .m2 {
		margin: 40.5% 0 0 62.3%;
		width: 3.1em;
	}
	#ctsTree .m3 {
		margin: 36.5% 0 0 21.3%;
	}
	#ctsTree .m4 {
		margin: 34% 0 0 33.3%;
	}
	#ctsTree .m5 {
		margin: 15.5% 0 0 38.1%;
	}
	#ctsTree .m6 {
		margin: 15.5% 0 0 57.9%;
	}
	#ctsTree .m7 {
		margin: 18.9% 0 0 65.1%;
	}
	#ctsTree .main_c li.m8 {
		margin: 32.8% 0 0 67.4%;
		letter-spacing: -0.05em;
		font-size: 0.88em;
	}
	#ctsTree .m9 {
		margin: 40.2% 0 0 74.7%;
		letter-spacing: -0.02em;
	}
	#ctsTree .m10 {
		margin: 18.8% 0 0 28.7%;
	}
	#ctsTree .m11 {
		margin: 41.9% 0 0 51.2%;
	}
	#ctsTree .m12 {
		margin: 47.1% 0 0 48.9%;
	}
	#ctsTree .m13 {
		margin: 23.4% 0 0 38.7%;
	}
	#ctsTree li.f1 {
		margin: 35.4% 0 0 38.3%;
	}
	#ctsTree .fluit li {
		width: 5.15em;
		height: 3.45em;
		font-size: 1em;
		z-index: 1;
	}
	#ctsTree .fluit li img.forsp{
		display:none;
	}
	#ctsTree li.f2 {
		margin: 38.8% 0 0 26.5%;
		font-size: 0.94em;
	}
	#ctsTree li.f2 img{
		width: 3.9em;
		margin: 35.7% 0 0 -2%;
	}
	#ctsTree li.f2 small {
		font-size: 0.8em;
	}
	#ctsTree li.f3 {
		margin: 39.2% 0 0 72.7%;
		font-size: 0.95em;
	}
	#ctsTree li.f3 img{
		width: 2.828em;
		margin: 32.8% 0 0 -6.7%;
	}
	#ctsTree li.f2 small {
		font-size: 0.9em;
	}
	#ctsTree li.f3 {
		margin: 39.8% 0 0 67.8%;
		font-size: 1.15em;
		padding-top: 0.9em;
	}
	#ctsTree li.f4 {
		margin: 28.8% 0 0 15.4%;
	}
	#ctsTree li.f5 {
		margin: 26% 0 0 29%;
	}
	#ctsTree li.f6 {
		margin: 6.9% 0 0 36.4%;
	}
	#ctsTree li.f7 {
		margin: 6.5% 0 0 56.9%;
	}
	#ctsTree li.f8 {
		margin: 10.65% 0 0 65.4%;
	}
	#ctsTree li.f9 {
		margin: 17.6% 0 0 73.5%;
	}
	#ctsTree li.f10 {
		margin: 25.5% 0 0 78.5%;
	}
	#ctsTree li.f11 {
		margin: 34.9% 0 0 79.9%;
	}
	#ctsTree li.f12 {
		margin: 10.6% 0 0 26.6%;
	}
	#ctsTree li.f13 {
		margin: 5.4% 0 0 47.4%;
	}
	#ctsTree .f1 {
		margin: 35.5% 0 0 36.9%;
	}

	#ctsTree .f1 img{
		margin: -33% 0 0 8.5%;
	}
	#ctsTree .f2 img{
		margin: -30% 0 0 0;;
	}
	#ctsTree .f3 img{
		margin: -30% 0 0 0;
	}
	#ctsTree .f4 img{
		margin: -41% 0 0 -3.5%;
	}
	#ctsTree .f5 img{
		margin: -30% 0 0 -1%;
	}
	#ctsTree .f6 img{
		margin: -36% 0 0 2%;
	}
	#ctsTree .f7 img{
		margin: -38% 0 0 0%;
	}
	#ctsTree .f8 img{
		margin: -37.4% 0 0 3%;
	}
	#ctsTree .f9 img{
		margin: -40.1% 0 0 8%;
	}
	#ctsTree .f10 img{
		margin: -29.1% 0 0 0;
	}
	#ctsTree .f11 img{
		margin: -34% 0 0 -2px;
	}
	#ctsTree .f12 img{
		margin: -33.4% 0 0 4%;
	}
	#ctsTree .f13 img{
		margin: -40.4% 0 0 3%;
	}

	#ctsTree .fluit .milk{
		width: 4.453em;
		margin-top: -2.6em;
	}
	#ctsTree .fluit .fcream{
		width: 6.03em;
	}
	#ctsTree .fluit .condecemilk{
		width: 3.882em;
	}
	#ctsTree .fluit .pcheese{
		width: 5.318em;
	}
	#ctsTree .fluit .ncheese{
		width: 6.038em;
	}
	#ctsTree .fluit .butter{
		width: 4.539em;
	}
	#ctsTree .fluit .freshcheese{
		width: 5.695em;
	}
	#ctsTree .fluit .creamcheeze{
		width: 4.866em;
		margin-top: -2.5em;
	}
	#ctsTree .fluit .yogurt{
		width: 6.212em;
	}
	#ctsTree .fluit .bmp{
		width: 7.11em;
	}
	#ctsTree .fluit .skim{
		width: 7.3em;
	}
	#ctsTree .fluit .i_milk{
		margin: -7% 0 0 0;
		width: 3.6em;
	}
	#ctsTree .fluit .i_fcream{
		margin: 0.2% 0 0 3%;
		width: 4.6em;
	}
	#ctsTree .fluit .i_condecemilk{
		margin: 3.6% 0 0 6%;
		width: 5.6em;
	}
	#ctsTree .fluit .i_pcheese{
		margin: -0.9% 0 0 -4.3%;
		width: 6.8em;
	}
	#ctsTree .fluit .i_ncheese{
		margin: 5.2% 0 0 3%;
		width: 6.9em;
	}
	#ctsTree .fluit .i_butter{
		margin: 7% 0 0 13%;
		width: 5.3em;
	}
	#ctsTree .fluit .i_freshcheese{
		margin: 2% 0 0 0%;
		width: 4.8em;
	}
	#ctsTree .fluit .i_creamcheeze{
		margin: -13.7% 0 0 -2%;
		width: 4.4em;
	}
	#ctsTree .fluit .i_yogurt{
		margin: -2% 0 0 4%;
		width: 5.1em;
	}
	#ctsTree .fluit .i_bmp{
		margin: -5% 0 0 -2.5%;
		width: 4.5em;
	}
	#ctsTree .fluit .i_skim{
		margin: 1.6% 0 0 -1%;
		width: 4.7em;
	}
	
	#content .expcover{
		position:absolute;
		width:100%;
		background:#fff;
		opacity: 0.7;
		height:100%;
		top:0;
		z-index: 7;
		display: none;
		pointer-events: all;
	}
	#ctsTree .expo{
		width: 100%;
		top: 0;
		position: fixed;
		height: 100%;
		left: 0;
		z-index: 8;
		display: none;
		pointer-events: none;
	}
	#ctsTree .expo li img{
		width:100%;
	}
	#ctsTree .expo li .m1,
	#ctsTree .expo li .m2{
		display:none !important;
	}
	#ctsTree .expo li{
		margin: -0 0 0 21.9%;
		width: 56.1%;
		height: auto;
		top: 50%;
		transform: translateY(-50%);
		display: none;
		transform-origin: 50% 0%;
	}
	#ctsTree .expo li.e2{
		margin: 1.4% 0 0 6.8%;
		width: 84.8%;
	}
	#ctsTree .expo li.e3{
		margin: 0.6% 0 0 11.1%;
		width: 76.6%;
	}
	#ctsTree .expo li.e4{
		margin: 0 0 0 26%;
		width: 48.7%;
	}
	#ctsTree .expo li.e5{
		margin: 0 0 0 10.5%;
		width: 78.1%;
	}
	#ctsTree .expo li.e6{
		margin: 0 0 0 14.4%;
		width: 71.5%;
	}
	#ctsTree .expo li.e7{
		margin: 0 0 0 16.7%;
		width: 66.7%;
	}
	#ctsTree .expo li.e8{
		margin: 0.7% 0 0 14.4%;
		width: 71.6%;
	}
	#ctsTree .expo li.e9{
		margin: 0% 0 0 14%;
		width: 72.4%;
	}
	#ctsTree .expo li.e10{
		margin: 0.9% 0 0 15.9%;
		width: 68.5%;
	}
	#ctsTree .expo li.e11{
		margin: 0.7% 0 0 14.4%;
	    width: 71.6%;
	}
	#ctsTree .expo li.e12{
		margin: 1.4% 0 0 6.8%;
		width: 84.8%;
	}
	#ctsTree .expo li.e13{
		margin: 1.4% 0 0 6.8%;
		width: 84.8%;
	}
	#ctsTree .arrow{display:none;}
	#ctsTree .expo li img.close{position:absolute;right: 0;width: 5.65em;margin: 7.5% 7.7% 0 0;opacity: 0;z-index: 2;pointer-events: all;}
	#ctsTree .expo li.pop .close{opacity:1;}
	#ctsTree .e5 .close{margin: 9.5% 5.2% 0 0;}
    #ctsTree .fkds {
		background: url(../../milktree/img/fkds_sp.png) no-repeat;
	}
	#ctsTree .e2 .fkds {
		background: url(../../milktree/img/fkds_sp.png) no-repeat;
	}
	#ctsTree .e4 .fkds {
		background: url(../../milktree/img/fkds_sp.png) no-repeat;
	}
	#ctsTree .e5 .fkds {
		background: url(../../milktree/img/fkds_sp.png) no-repeat;
	}
	#ctsTree li.e2 .close{}
    #ctsTree .expo h3{
		font-size: 3.82em;
		margin: 1.65em 0.4em 0.1em 0;
	}
	#ctsTree .expo p{
		font-size: 2em;
		margin: -0.2em 0 0 -0.4em;
	}
	#ctsTree li.e2 h3{
		margin-top: 2em;
	}
	#ctsTree li.e3 h3{
		margin-top: 1.4em;
	}
	#ctsTree li.e4 h3{
		margin-top: 1.4em;
	}
	#ctsTree li.e5 h3{
		margin-top: 1.6em;
	}
	#ctsTree li.e6 h3{
		margin-top: 1.43em;
	}
	#content a.return {
		font-size: 1.95em;
		margin: 4.8% 0 14.7%;
	}
	#content .family{
		margin: 52.1% 0 0 21%;
		width: 9.9%;
	}
	#content .caw1{
		margin: 109.9% 0 0 -4.5%;
		width: 40.1%;
	}
	#content .caw4{
		margin: 55.5% 0 0 70.4%;
		width: 12.4%;
	}
	#content .caw5{
		margin: 110.3% 0 0 80%;
		width: 6.6%;
	}

	/*============================
	#puzzle_bg
	============================*/
	#puzzle_bg .clearbg1 {
	  width: 260%;
	  margin: -32% 0 0 21%;
	}
	#puzzle_bg .clearbg2 {
	  width: 240%;
	  height: 50%;
	  top: -4.7em;
	}
	#puzzle_bg .tree {
	  margin: 56.8% 0 0 0.1%;
	  width: 100%;
	  transform-origin: 50% 100%;
	}

	/*============================
	#puzzle_piece
	============================*/
	div#puzzle_piece {position: relative;z-index: 1;bottom: 0;width: 94.3%;margin-left: 2.8%;margin-bottom: 3.4%;margin-top: -6%;display: block;justify-content: space-between;background: rgb(255 255 255 / 90%);border: #009e38 0.3em solid;border-radius: 2.7em;box-sizing: border-box;height: 21.1em;box-shadow: rgb(0 0 0 / 30%) 0.4em 0.2em 0.7em;}
	#puzzle_piece .box {width: 100%;background: none;border-radius: none;border: none;height: auto;box-shadow: none;margin-bottom: 2.1%;}
	#puzzle_piece .box h3 {width: 21.615em;margin: -4.4% auto 0%;padding-left: 2.3%;}
	#puzzle_piece .box h3 img{width:100%;}
	#puzzle_piece .box ul {display: flex;justify-content: center;height: 9.4em;width: 101.8%;margin-left: -0.8%;}
	#puzzle_piece .box li{
		width: 18.2%;
		position: relative;
		justify-content: left;
		cursor: move;
		/* border: #f0f 2px solid; */
		box-sizing: border-box;
	}
	#puzzle_piece .box .pika li:not(.fix){
		animation: pika 1.2s cubic-bezier(0.4, 0, 0.5, 1) infinite;
	}
	#puzzle_piece .box li.graving *{
		pointer-events:none;
	}
	#puzzle_piece .box li.graving img:first-child{
		opacity:0;
		transition:0s;
	}
	#puzzle_piece .box li.graving img:last-child{
		transform: translate(-150%, -150%) scale(1.7)!important;
		margin:0;
		transition:0s;
	}
	#puzzle_piece .box.leftBox li{
		width: 16%;
		font-size: 1.1em;
	}
	#puzzle_piece .box li.fix{
		transition: 0s !important;
		opacity: 0.5 !important;
		transform: none !important;
	}
	#puzzle_piece .box li.fix img{
		transition: 0s !important;
	}
	#puzzle_piece .box li .sppiece{display:none;}
	#puzzle_piece .box li img:first-child{margin-top: 5.2em;pointer-events: none;}
	#puzzle_piece .box li img:last-child{
		pointer-events: none;
		transition: .3s;
	}
	#puzzle_piece .box li img.forsp{transition: .3s;transition-delay: .2s;}

	#puzzle_piece .box li.f1{
	    width: 21%;
	}
		#puzzle_piece .box li.f2{}
		#puzzle_piece .box li.f3{}
		#puzzle_piece .box li.f4{
	    width: 19%;
	}
		#puzzle_piece .box li.f5{
	    width: 22%;
	}
		#puzzle_piece .box li.f6{
	    width: 16%;
	}
		#puzzle_piece .box li.f7{
	    width: 15%;
	}
		#puzzle_piece .box li.f8{}
		#puzzle_piece .box li.f9{
	    width: 16%;
	}
		#puzzle_piece .box li.f10{
	    width: 15%;
	}
		#puzzle_piece .box li.f11{
	    width: 19%;
	}
		#puzzle_piece .box li.f12{
	    width: 23%;
	}
		#puzzle_piece .box li.f13{
	    width: 12%;
	}
	#puzzle_piece .box li.f13 .milk {
	  width: 4.2em;
	  margin: 5em 0 0 23%;
	}
	#puzzle_piece .box li.f13 .i_milk {
	  width: 3.4em;
	  margin: -2% 0 0 15%;
	}
	#puzzle_piece .box li.f9 .fcream {
	  width: 6.2em;
	  margin: 4.6em 0 0 -0.8em;
	}
	#puzzle_piece .box li.f9 .i_fcream {
	  margin: -5.1% 0 0 -2.2%;
	  width: 4.3em;
	}
	#puzzle_piece .box li.f7 .condecemilk {
	  width: 3.6em;
	  margin: 4.8em 0 0 13.1%;
	}
	#puzzle_piece .box li.f7 .i_condecemilk {
	  margin: -3.7% 0 0 4%;
	  width: 5.1em;
	}
	#puzzle_piece .box li.f12 .pcheese {
	  width: 8.3em;
	  margin: 5.5em 0 0 -3.7%;
	}
	#puzzle_piece .box li.f12 .i_pcheese {
	  margin: 8.4% 0 0 -2%;
	  width: 6.2em;
	}
	#puzzle_piece .box li.f5 .ncheese {
	  width: 9.7em;
	  margin: 5.9em 0 0 -9%;
	}
	#puzzle_piece .box li.f5 .i_ncheese {
	  margin: 9.1% 0 0 -4.9%;
	  width: 6.9em;
	}
	#puzzle_piece .box li.f10 .butter {
	  width: 4.8em;
	  margin: 5.7em 0 0 0%;
	}
	#puzzle_piece .box li.f10 .i_butter {
	  margin: 19.3% 0 0 -2%;
	  width: 5.3em;
	}
	#puzzle_piece .box li.f1 .freshcheese {
	  width: 9.9em;
	  margin: 5.9em 0 0 -6.5%;
	}
	#puzzle_piece .box li.f1 .i_freshcheese {
	  margin: 15.3% 0 0 -2%;
	  width: 4.8em;
	}
	#puzzle_piece .box li.f8 .creamcheeze {
	  width: 8.8em;
	  margin: 5.8em 0 0 3.5%;
	}
	#puzzle_piece .box li.f8 .i_creamcheeze {
	  margin: 6.5% 0 0 -1.4%;
	  width: 4.4em;
	}
	#puzzle_piece .box li.f6 .yogurt {
	  width: 6.5em;
	  margin: 5.7em 0 0 17.5%;
	}
	#puzzle_piece .box li.f6 .i_yogurt {
	  margin: 14.3% 0 0 8%;
	  width: 5.3em;
	}
	#puzzle_piece .box li.f4 .bmp {
	  width: 6.7em;
	  margin: 4.7em 0 0 -3.6%;
	}
	#puzzle_piece .box li.f4 .i_bmp {
	  margin: 1.3% 0 0 -3.8%;
	  width: 4.2em;
	}
	#puzzle_piece .box li.f11 .skim {
	  width: 7.3em;
	  margin: 5.5em 0 0 -6.6%;
	}
	#puzzle_piece .box li.f11 .i_skim {
	  margin: 10% 0 0 -4%;
	  width: 4.4em;
	}
	
	/*============================
	#puzzle_howto
	============================*/
	#puzzle_howto .bg {
	  background: rgb(255 255 255 / 80%);
	  left: 50%;
	  transform: translateX(-50%);
	}
	#puzzle_howto .textBox {
	  width: 94.6%;
	  margin: 22.7% auto 0;
	  border-width: 0.3em;
	  border-radius: 2.7em;
	  box-shadow: rgb(0 0 0 / 30%) 0.4em 0.2em 0.7em;
	}
	#puzzle_howto .textBox h3 {
	  margin: 6.4% 0 1.8% 36.4%;
	  width: 15.2em;
	}
	#puzzle_howto .textBox img{
		width:100%;
	}
	#puzzle_howto .textBox p {
	  margin: 2.8% 0 2% 15.4%;
	  width: 70.2%;
	}
	#puzzle_howto .textBox a {
	  margin: 6.2% auto 5.1%;
	  width: 23.9em;
	  padding-left: 0.8%;
	}
	#puzzle_howto .textBox .obj {
	}
	#puzzle_howto .textBox .obj1 {
	  margin: 79.1% 0 0 6.8%;
	  width: 9.2em;
	}
	#puzzle_howto .textBox .obj2 {
	  margin: 6% 0 0 12.3%;
	  width: 7.5em;
	}
	#puzzle_howto .textBox .obj3 {
	  margin: 12.8% 0 0 6%;
	  width: 4.9em;
	}
	#puzzle_howto .textBox .obj4 {
	  margin: 6.1% 0 0 73.1%;
	  width: 6.4em;
	}
	#puzzle_howto .textBox .obj5 {
	  margin: 11.4% 0 0 80.3%;
	  width: 6.6em;
	}
	#puzzle_howto .textBox .obj6 {
	  margin: 82.5% 0 0 75.9%;
	  width: 6.3em;
	}
	#puzzle_howto .textBox .obj7 {
	  margin: 91.2% 0 0 85.7%;
	  width: 3.9em;
	}
	#content a.button {
	  width: 18.286em;
	  margin: 0 auto;
	  z-index: 2;
	  transition: opacity 0.4s, filter 0.4s;
	  width: 67.2%;
	}
	#content a.button.return {
	  margin: 1.8% auto 0%;
	  font-size: 1em;
	}

}