@charset "utf-8";

body{


	background: #9B7050 url(images/bg_game.svg)  top center repeat-x;


background-size: auto 100% ;
min-height: 100vh;
overflow: hidden;
}

/*
9b704e
6fbfec
*/

.after_content{
	background:#9b704e;
}

main{

}

.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	position:relative;

background: -moz-linear-gradient(top,  rgba(155,112,78,0) 0%, rgba(155,112,78,0) 60%, rgba(155,112,78,1) 63%, rgba(155,112,78,1) 100%);
background: -webkit-linear-gradient(top,  rgba(155,112,78,0) 0%,rgba(155,112,78,0) 60%,rgba(155,112,78,1) 63%,rgba(155,112,78,1) 100%);
background: linear-gradient(to bottom,  rgba(155,112,78,0) 0%,rgba(155,112,78,0) 60%,rgba(155,112,78,1) 63%,rgba(155,112,78,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009b704e', endColorstr='#9b704e',GradientType=0 );
z-index:2;

}


.window{
width:100%;
max-width: 340px;
padding: 1em;
margin: 0 auto;
background: #fff;
border-radius: 1em;
-webkit-filter: drop-shadow(0.5em 0.5em 0px rgba(0,0,0,.2));
filter: drop-shadow(0.5em 0.5em 0px rgba(0,0,0,.2));
transform: translateZ(0);
text-align:center;
}

.window img{
width:85%;
}


.field{
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}

.cover{

	width:100%;
	height:100%;
	position: absolute;
	left:0;
	z-index:10;
	background: url(images/ground.png) center bottom  repeat-x;
	background-size: auto 50% ;


}


.konsai_cover{

	height:100%;
	position: absolute;
	top:0;

	z-index:11;

	width:30%;
	cursor:pointer;

}



.field .konsai{
	width:30%;
	position: absolute;
	display: none;

}

.field .konsai.show{
	display: inline-block;
}



.field .konsai.complete{
	transition:1s;
}

.field .konsai.satoimo.fuwa,
.field .konsai.syouga.fuwa,
.field .konsai.kabu.fuwa{


	animation-name:fuwa;

	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state: running;
	animation-duration:0.4s;


}


.field .konsai.hold{
	margin-top:-2%;
}



@keyframes fuwa{
50%{ margin-top:-3%; }
100%{ margin-top:0%; }
}

.field .comment{
display: none;
width:30%;
position: absolute;
z-index:12;
}


.field .comment[data-level="1"]{ top:40%; left:1%; }
.field .comment[data-level="2"]{ top:35%; right:1%; }
.field .comment[data-level="3"]{ top:30%; left:1%; }



.kotae_panel{
position:absolute;

display:none;
justify-content: center;
align-items: center;
flex-direction: column;

z-index:12;
}

.kotae_panel.show{
display:flex;
}

.kotae_panel>div{
justify-content: center;
align-items: center;
flex-direction: column;
}



.kotae_panel img[data-kotae]{
	display:none;
}

.kotae_panel img.show[data-kotae]{
	display:inline-block;
}

footer{
	background-color: rgba(155,112,78,1);
}


.do_swipe1 {
	display: none;
	position:absolute;
	bottom:30%;
	left:55%;

	width:20%;
	z-index:13;

	animation-name: yubiswipe;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes yubiswipe {
	to { transform: translateY( -40%) }
}



.do_swipe2{
	display: none;
		position:absolute;
		top:10%;
		left:auto;

		max-width:80%;
		z-index: 13;
	}

.do_swipe1.show ,
.do_swipe2.show {
		display: block;

}

#bottom{
	height:10vh;
	width:100%;
	bottom:0;
	left:0;
	position:absolute;
	background:#9B7050;
	z-index:1;
}

@media all and (max-width: 736px) {


}