@charset "UTF-8";



.container {
        width:500px;
        height:400px;
        background: #AFC87D;
        position: relative;
}

.animal1{
        top: 35px;
        left: 205px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal2{
        top: 155px;
        left: 85px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal3{
        top: 35px;
        left: 325px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal4{
        top: 155px;
        left: 205px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal5{
        top: 35px;
        left: 85px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.animal6{
        top: 155px;
        left: 325px;
        width:90px;
        height:90px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;

}

.animal6:hover {
        transform: scale(1.4);
        transition-duration: 2s;
}

.clear{
        top: 35px;
        left: 205px;
        width:90px;
        height:90px;
        background-image:url("../parts/foxClear.png");
        background-repeat: no-repeat;
        background-position:50% 50%;
        background-size:contain;
        float: left;
        position: absolute;
        z-index: 1;
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate:hover div {
        animation: rotate 6s infinite linear;
}

.rotate2:hover div {
        animation: rotate 3s infinite linear;
}

.move:hover div {
        transform: translateY(-10px);
        transition-duration: 6s;
}

.move2:hover div {
        transform: translateY(10px);
        transition-duration: 6s;
}

.strain:hover div {
        transform: skew(10deg,10deg);

}

.strain2:hover div {
        transform: skew(-10deg,-10deg);
}

.stand:hover div {
        transform: scale(1.4);
        transition-duration: 2s;
        transition-delay: 3s;
}

.coin:hover div {
        transform: rotateY(3600deg);
        transition-duration: 10s;
}


/*レスポンシブ対応*/
@media screen and (max-width: 600px){

                
}