html,
body {
}
body {
    background-color: #b8d8c6;
    margin: 0;
    width:100%;
}
.contaner{
    width:100%;
    overflow: hidden;
}
.inner{
    margin-top:100px;
}
.touch{
	width:40%;
	margin:0 auto;
}
.touch_img{
	width:100%;
	height:auto;
}
.tana{
    width:610px;
    height:603px;
    margin-top:100px;
    margin-left:400px;
    
    background-image:url(../img/tana.png);
}

.frame0{
    position:absolute;
    display:block;
    margin-top:72px;
    margin-left:56px;
    
    -webkit-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -ms-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
}
.frame1{
    position:absolute;
    display:block;
    margin-top:72px;
    margin-left:232px;
    //overflow:hidden;
    
    -webkit-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -ms-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
}
.frame2{
    position:absolute;
    display:block;
    margin-top:72px;
    margin-left:406px;
    //overflow:hidden;
    
    -webkit-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    -ms-box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
    box-shadow:0px 0px 10px 1px rgba(0,0,0,0.4);
}
.zoom {
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -ms-transform: scale(0.2);
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
    transform: scale(0.2);
    transform-origin: 0 0;
}
.zoom:hover{
    z-index:999;

    -o-transform: scale(0.8);
    -o-transform: translate(-187px,-367px);
    -o-transform-origin: 0 0;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.8);
    -moz-transform: translate(-187px,-367px);
    -moz-transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    -webkit-transform: translate(-187px,-667px);
    -webkit-transform-origin: 0 0;
    transform: scale(0.8);
    transform: translate(-187px,-667px);
    transform-origin: 0 0;
}
.frame1:hover{
    z-index:999;

    -o-transform: scale(0.8);
    -o-transform: translate(-357px,-367px);
    -o-transform-origin: 0 0;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.8);
    -moz-transform: translate(-357px,-367px);
    -moz-transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    -webkit-transform: translate(-357px,-667px);
    -webkit-transform-origin: 0 0;
    transform: scale(0.8);
    transform: translate(-357px,-667px);
    transform-origin: 0 0;
}
.frame2:hover{
    z-index:999;

    -o-transform: scale(0.8);
    -o-transform: translate(-537px,-367px);
    -o-transform-origin: 0 0;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.8);
    -moz-transform: translate(-537px,-367px);
    -moz-transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    -webkit-transform: translate(-537px,-667px);
    -webkit-transform-origin: 0 0;
    transform: scale(0.8);
    transform: translate(-537px,-667px);
    transform-origin: 0 0;
}
.yuka{
    position: absolute;
    margin-top:-100px;
    width:100%;
    z-index:-1;
}
.yuka img{
    width:100%;
}
/*@media screen and (max-width: 600px) {
	.inner{
		height:1020px;
	}
}*/
.anim{
    font-family: 'Changa One', cursive;
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}
.anim::before,
.anim::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.anim,
.anim::before,
.anim::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .1s;
	transition: all .1s;
}