@charset "UTF-8";

#play{text-align:left;}
.stepBox{width:900px;margin:50px auto 100px;position:relative;z-index:0;}
.stepBox .copy1{position: absolute;right:-50px;;top:330px;z-index:10;}
.stepBox p{font-size:22px;}
.stepBox p.midashi{font-size:42px;color:#FF0000;}
.actBox{width:900px;height:517px;position:relative;overflow:hidden}
.actBox .hand1{width:666px;position: absolute;z-index: 1;right:-50px;}
.actBox .base1{width:900px;position: absolute;z-index: 0;}

.actBox{width:900px;height:517px;position:relative;overflow:hidden}
.actBox .toy1{width:414px;position: absolute;z-index: 1;left:-50px; bottom:0;}
.actBox .toy2{width:414px;position: absolute;z-index: 1;right:-50px; top:0;}
.actBox .base2{width:900px;position: absolute;z-index: 0;}

#rule{width:900px; margin:0 auto;}
#rule img{margin:20px auto;}

@media screen and (max-width: 667px) {

#play{text-align:left;}
.stepBox{width:90%;margin:3vh auto 7vh;position:relative;z-index:0;}
.stepBox.step1 .copy1{width:45%; position: absolute;right:0px;;top:21vh;z-index:10;}
.stepBox.step2 .copy1{width:40%; position: absolute;right:0px;;top:21vh;z-index:10;}
.stepBox.step3 .copy1{width:50%; position: absolute;right:0px;;top:21vh;z-index:10;}
    
.stepBox p{font-size:3.5vw;}
.stepBox p.midashi{font-size:5vw;color:#FF0000;}

.actBox{width:100%;height:30vh; position:relative;overflow:hidden;margin-bottom:0;}
.actBox .hand1{width:60%;position: absolute;z-index: 1;right:0;top:5vh}
.actBox .base1{width:100%;position: absolute;z-index: 0;}

.actBox .toy1{width:41%;position: absolute;z-index: 1;left:1vw; bottom:2vh;}
.actBox .toy2{width:41%;position: absolute;z-index: 1;right:1vw; top:2vh;}
.actBox .base2{width:100%;position: absolute;z-index: 0;}

#rule{width:90%; margin:0 auto;}
#rule img{margin:0.6vh auto;}
    
}