@charset "UTF-8";

#container {
  width: 100%;
  height: 100%;
  padding: 0;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  /*width: 1024px;*/
  /*height: 648px;*/
  /*background: url(../img/background.png) 50% 50% no-repeat;*/
  /*background-size: 100% 100%;*/
}
#stage > img {
  pointer-events: none;
}
#stage #background {
  position: absolute;
  top: 137px;
  left: 222px;
}
#stage #stand {
  position: absolute;
  top: 342px;
  left: 145px;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #needle {
  position: absolute;
  top: 140px;
  left: 511px;
  transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}
#stage #axis {
  position: absolute;
  top: 357px;
  left: 478px;
}
#stage #axis2 {
  position: absolute;
  top: 316px;
  left: 500px;
  width: 27px;
  height: 16px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
}
#stage #left_dish {
  position: absolute;
  top: 260px;
  left: 129px;
  transform-origin: 384px 134px;
  -o-transform-origin: 384px 134px;
  -ms-transform-origin: 384px 134px;
  -moz-transform-origin: 384px 134px;
  -webkit-transform-origin: 384px 134px;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #left_dish > img {
  pointer-events: none;
  transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #left_dish > div {
  transform-origin: 156px 110px;
  -o-transform-origin: 156px 110px;
  -ms-transform-origin: 156px 110px;
  -moz-transform-origin: 156px 110px;
  -webkit-transform-origin: 156px 110px;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #right_dish {
  position: absolute;
  top: 260px;
  left: 586px;
  transform-origin: -72px 134px;
  -o-transform-origin: -72px 134px;
  -ms-transform-origin: -72px 134px;
  -moz-transform-origin: -72px 134px;
  -webkit-transform-origin: -72px 134px;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #right_dish > img {
  pointer-events: none;
  transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage #right_dish > div {
  transform-origin: 156px 110px;
  -o-transform-origin: 156px 110px;
  -ms-transform-origin: 156px 110px;
  -moz-transform-origin: 156px 110px;
  -webkit-transform-origin: 156px 110px;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
#stage.left #stand {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
}
#stage.left #left_dish {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
}
#stage.left #left_dish > img,
#stage.left #left_dish > div {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
}
#stage.left #right_dish {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
}
#stage.left #right_dish > img,
#stage.left #right_dish > div {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
}
#stage.left #needle {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-8.5deg);
  -o-transform: rotate(-8.5deg);
  -ms-transform: rotate(-8.5deg);
  -moz-transform: rotate(-8.5deg);
  -webkit-transform: rotate(-8.5deg);
}
#stage.right #stand {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
}
#stage.right #left_dish {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
}
#stage.right #left_dish > img,
#stage.right #left_dish > div {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
}
#stage.right #right_dish {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(16deg);
  -o-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  -moz-transform: rotate(16deg);
  -webkit-transform: rotate(16deg);
}
#stage.right #right_dish > img,
#stage.right #right_dish > div {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
}
#stage.right #needle {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  transform: rotate(8.5deg);
  -o-transform: rotate(8.5deg);
  -ms-transform: rotate(8.5deg);
  -moz-transform: rotate(8.5deg);
  -webkit-transform: rotate(8.5deg);
}
#stage.return #stand,
#stage.return #left_dish,
#stage.return #left_dish > img,
#stage.return #left_dish > div,
#stage.return #right_dish,
#stage.return #right_dish > img,
#stage.return #right_dish > div,
#stage.return #needle {
  transition: .4s ease-in;
  -o-transition: .4s ease-in;
  -ms-transition: .4s ease-in;
  -moz-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
}
#stage #left_dish_hittest {
  position: absolute;
  top: 190px;
  left: 129px;
  width: 318px;
  height: 182px;
}
#stage.left #left_dish_hittest {
  top: 250px;
}
#stage.right #left_dish_hittest {
  top: 120px;
}
#stage #right_dish_hittest {
  position: absolute;
  top: 190px;
  left: 586px;
  width: 318px;
  height: 182px;
}
#stage.left #right_dish_hittest {
  top: 120px;
}
#stage.right #right_dish_hittest {
  top: 250px;
}



#items {
  position: absolute;
  top: 30px;
  left: 734px;
  width: 254px;
  height: 134px;
  border: 3px solid #0B89DD;
  border-radius: 10px;
}
#items .item {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}
#items .item1 {
  left: 50px;
}
#items .item2 {
  left: 160px;
}
#items .max {
  opacity: 0.5;
}

#stage #left_dish div,
#stage #right_dish div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#stage #left_dish div .item,
#stage #right_dish div .item {
  cursor: pointer;
}
#stage .dish1 > img:nth-child(1) { top: 15px; left: 42px; }
#stage .dish1 > img:nth-child(2) { top: 15px; left: 87px; }
#stage .dish1 > img:nth-child(3) { top: 15px; left: 132px; }
#stage .dish1 > img:nth-child(4) { top: 15px; left: 177px; }
#stage .dish1 > img:nth-child(5) { top: 15px; left: 222px; }
#stage .dish2 > img:nth-child(1) { top: -17px; left: 51px; }
#stage .dish2 > img:nth-child(2) { top: -53px; left: 51px; }
#stage .dish2 > img:nth-child(3) { top: -17px; left: 92px; }
#stage .dish2 > img:nth-child(4) { top: -53px; left: 92px; }
#stage .dish2 > img:nth-child(5) { top: -17px; left: 133px; }
#stage .dish2 > img:nth-child(6) { top: -53px; left: 133px; }
#stage .dish2 > img:nth-child(7) { top: -17px; left: 174px; }
#stage .dish2 > img:nth-child(8) { top: -53px; left: 174px; }
#stage .dish2 > img:nth-child(9) { top: -17px; left: 215px; }
#stage .dish2 > img:nth-child(10) { top: -53px; left: 215px; }


#buttons {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#buttons > * {
  position: absolute;
  transform: rotate(.1deg);
  -o-transform: rotate(.1deg);
  -ms-transform: rotate(.1deg);
  -moz-transform: rotate(.1deg);
  -webkit-transform: rotate(.1deg);
  transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

#guide {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid #b0b0b0;
  transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}
#guide > img {
  float: left;
}
#guide #guide_left_dish {
  position: absolute;
  top: 28px;
  left: 26px;
}
#guide #guide_right_dish {
  position: absolute;
  top: 28px;
  left: 165px;
}
#guide #guide_left_dish img,
#guide #guide_right_dish img {
  position: absolute;
}
#guide .dish1 > img:nth-child(1) { top: 20px; left: 0; }
#guide .dish1 > img:nth-child(2) { top: 20px; left: 13px; }
#guide .dish1 > img:nth-child(3) { top: 20px; left: 26px; }
#guide .dish1 > img:nth-child(4) { top: 20px; left: 39px; }
#guide .dish1 > img:nth-child(5) { top: 20px; left: 52px; }
#guide .dish2 > img:nth-child(1) { top: 10px; left: 2px; }
#guide .dish2 > img:nth-child(2) { top: 0; left: 2px; }
#guide .dish2 > img:nth-child(3) { top: 10px; left: 14px; }
#guide .dish2 > img:nth-child(4) { top: 0; left: 14px; }
#guide .dish2 > img:nth-child(5) { top: 10px; left: 26px; }
#guide .dish2 > img:nth-child(6) { top: 0; left: 26px; }
#guide .dish2 > img:nth-child(7) { top: 10px; left: 38px; }
#guide .dish2 > img:nth-child(8) { top: 0; left: 38px; }
#guide .dish2 > img:nth-child(9) { top: 10px; left: 50px; }
#guide .dish2 > img:nth-child(10) { top: 0; left:50px; }

#dragging {
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}
.clone {
  position: absolute;
}
.return_item1 {
  top: 78px;
  left: 788px;
  opacity: 0;
  transition: .2s ease-in;
  -o-transition: .2s ease-in;
  -ms-transition: .2s ease-in;
  -moz-transition: .2s ease-in;
  -webkit-transition: .2s ease-in;
}
.return_item2 {
  top: 78px;
  left: 897px;
  opacity: 0;
  transition: .2s ease-in;
  -o-transition: .2s ease-in;
  -ms-transition: .2s ease-in;
  -moz-transition: .2s ease-in;
  -webkit-transition: .2s ease-in;
}

/* 文字 */
.num {
  font-family: Suken;
  margin: 0 0.1em;
}
.alphabet {
  font-family: SukenMath;
  margin: 0 0.1em;
}
.girisha {
  font-family: SukenGirisha;
  margin: 0 0.1em;
}


/*============================================================================*/
@font-face {
  font-family: "checkmark";
  src: url("../font/fontello.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}



/*============================================================================*/

#checkbox1 {
  top: 447px;
  left: 839px;
  width: 150px;
}

#play-button {
  top: 496px;
  left: 838px;
  padding-left: 32px;
  background-image: url(../img/play.png);
  background-size: 16px;
  background-position: 14px center;
}
#play-button.down {
  background-image: url(../img/play_down.png);
}
#play-button.disabled,
#play-button[disabled="disabled"] {
  background-image: url(../img/play_disabled.png);
}

#left-reset-button {
  top: 564px;
  left: 256px;
}

#right-reset-button {
  top: 564px;
  left: 608px;
}

#all-reset-button {
  top: 564px;
  left: 838px;
  padding-left: 32px;
  background-image: url(../img/repeat.png);
  background-size: 16px;
  background-position: 14px center;
}
#all-reset-button.down {
  background-image: url(../img/repeat_down.png);
}
#all-reset-button.disabled,
#all-reset-button[disabled="disabled"] {
  background-image: url(../img/repeat_disabled.png);
}