@charset "UTF-8";

body {
    background-color: #f7fcfe;
}
.side-r {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    overflow: auto;
    background-color: #EEEEEE;
    z-index: 999;
}

.heya {
    position: relative;
    margin: 170px auto;
    height: 600px;
    width: 600px;
    z-index: 1;
}
.kabe {
    position: absolute;
    margin: 0px auto;
    height: 600px;
    width: 600px;
    z-index: 1;
}
.kabe-l {
    position: absolute;
    top: -66px;
    left: -170px;
    width: 220px;
    height: 700px;

}
.kabe-l {
-moz-perspective:200;
-webkit-perspective:200;
-o-perspective:200;
-ms-perspective:200;
}
.kabe-l img{
-moz-transform: rotateY(29deg);/*数値が大きいほど角度がきつくなる(34)*/
-webkit-transform: rotateY(29deg);
-o-transform: rotateY(29deg);
-ms-transform: rotateY(29deg);
}
.kabe-r {
    position: absolute;
    top: -67px;
    right: -170px;
    width: 200px;
    height: 702px;

}
.kabe-r {
-moz-perspective:200;
-webkit-perspective:200;
-o-perspective:200;
-ms-perspective:200;
}
.kabe-r img{
-moz-transform: rotateY(-29deg);
-webkit-transform: rotateY(-29deg);
-o-transform: rotateY(-29deg);
-ms-transform: rotateY(-29deg);
}

.tenjyo {
    position: absolute;
    top: -190px;
    left: -200px;
    width: 1000px;
    height: -200px;
    clip-path: polygon(20% 100%, 0% 0%, 100% 0%, 80% 100%);
}

.yuka {
    position: absolute;
    top: 600px;/*575*/
    left: -200px;/*-160*/
    width: 1000px;/*800*/
    height: 200px;
    clip-path: polygon(0% 100%, 20% 0%, 80% 0%, 100% 100%);
    /*transform : perspective(100px) /*奥行指定(数値が小さいほど伸びる50-150)*/
    /*            rotateX(15deg)     /*Ｘ軸回転指定(数値が大きいほど倒れる0-90度)*/
    /*            scaleX(0.75);      /*Ｘ軸縮尺指定(数値が大きいほど横に伸びる1-2倍)*/
}

.tana {
    background-image: url("/hondana/img/tana2.png");
    position: absolute;
    top: 165px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    height: 350px;
    width: 300px;
    z-index: 3;
}

.gaku {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 3;
}
.syo {
    position: absolute;
    font-size:1.5em;
    text-align:center;
    line-height:1.2em;
    font-weight:bold;
    color: #FFF;
    text-shadow: 
	0 0 0.10em #2962FF,
	0 0 0.15em #2962FF,
	0 0 0.80em #2962FF,
	0 0 1.00em #2962FF;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 6;
}
.hap {
    position: absolute;
    top: 41px;
    left: 56%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 5;
}
.hon-u {
    position: absolute;
    top: 190px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 4;
}
.hon-s {
    position: absolute;
    top: 352px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 4;
}