@charset "UTF-8";



.container {
        width:500px;
        height:500px;
        background: #fdeff2;
        position: relative;

}

/*リロードボタン*/
.reload {
        top: 0px;
        left: 0px;
        width:60px;
        height:60px;
        background-image:url("../parts/reload.png");
        background-repeat: no-repeat;
        background-position:50% 50%;
        background-size:contain;
        position: absolute;
}


.taste1{
        top: 340px;
        left: 30px;
        width:60px;
        height:60px;
        background: #864A2B;
        float: left;
        position: absolute;
        z-index: 10;
}

.taste2{
        top: 410px;
        left: 80px;
        width:60px;
        height:60px;
        background: #f09199;
        float: left;
        position: absolute;
        z-index: 10;
}

.taste3{
        top: 410px;
        left: 360px;
        width:60px;
        height:60px;
        background: #FFEDB3;
        float: left;
        position: absolute;
        z-index: 10;
}

.taste4{
        top: 340px;
        left: 410px;
        width:60px;
        height:60px;
        background: #c5c56a;
        float: left;
        position: absolute;
        z-index: 10;
}

/*チョコの色変更*/
.nomal{
        filter: brightness(0) saturate(100%) invert(27%) sepia(66%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(89%);
}

.white{
        filter: brightness(0) saturate(100%) invert(95%) sepia(40%) saturate(773%) hue-rotate(310deg) brightness(107%) contrast(103%);
}

.strawberry{
        filter: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(904%) hue-rotate(306deg) brightness(101%) contrast(88%);
}

.maccha{
        filter: brightness(0) saturate(100%) invert(90%) sepia(3%) saturate(5345%) hue-rotate(15deg) brightness(92%) contrast(83%);
}

.saucer {
        width:160px;
        height:160px;
        background-image: url("../parts/saucer.png");
        background-repeat: no-repeat;
        background-position:50% 50%;
        background-size:contain;
        float: left;
        position: absolute;
        z-index:2;
}

#saucer-l {
        top:340px;
        left:0px;
}

#saucer-r {
        top:340px;
        left:340px;
        transform:rotate(-90deg);
}

.move {
        top:0px;
        width:500px;
        height:500px;
        background: #ff99cc;
        position: absolute;
        z-index: 20;
}

#move {
        left:500px;
}

#move2 {
        left:-500px;
}

.rtl {
  animation: PageAnime-rtl;
  animation-duration: 1s;
}

.rtl-first {
  animation: PageAnime-rtl-first;
  animation-duration: 1s;
}


@keyframes PageAnime-rtl {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(2);
  }
}

@keyframes PageAnime-rtl-first {
  0% {
    transform-origin: left;
    transform: scaleX(2);
  }
  100% {
    transform-origin: left;
    transform: scaleX(1);
  }
}

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

                
}