@charset 'utf-8';
#start-page{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d4caad;
  text-align: center;
}
#start-page p {
  text-shadow: #ffffff 1px 1px 2px;
  color:#333333;
  font-size: 20px;
}
#setting-area {
  margin-top: 80px;
}
input#soundon {
  font-size: 50px;
}
#start-btn {
  width: 200px;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
  background-image: url(../images/main/btn_start01.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#main-page {
  position: absolute;
  width: 100%;
  height: 100%;
}
#main-page #frame-area {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../images/main/corkboard.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#main-area {
  position: absolute;
  top: 22px;
  left: 24px;
  /* background-color: rgba(0, 255, 255, 0.445); */
  width: 268px;
  height: 376px;
}
#finish-area {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 268px;
  height: 160px;
  /* background-color: rgba(0, 255, 255, 0.445); */
}
#click-area #note-area {
  position: relative;
}
#click-area {
  z-index: 100;
}
#pin1,
#pin2 {
  position: absolute;
  top: 12px;
  width: 20px;
  height: 20px;
  background-position: 0 0;
  background: url(../images/main/pin_small.png) no-repeat;
}
#pin1 {
  left: 54px;
}
#pin2 {
  left: 188px;
}

#click-left-area,
#click-right-area,
#note-left-area,
#note-right-area {
  position: absolute;
  /* background-color: rgba(43, 255, 0, 0.322); */
  width: 120px;
  height: 100%;
}
#click-left-area,
#note-left-area {
  top: 10px;
  left: 10px;
  height: 140px;
}
#click-right-area,
#note-right-area {
  top: 10px;
  left: 142px;
  height: 140px;
}

#board-left,
#board-right {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: blue; */
}
#stamp-left, #stamp-right {
  position: absolute;
  width: 45px;
  height: 45px;
  top : 200px;
  left : 74px;
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;  
  z-index: 20;
  /* background-color: aqua; */
}
.stamp-win {
  background: url(../images/main/result_win.png) no-repeat;
}
.stamp-draw {
  background: url(../images/main/result_draw.png) no-repeat;
}

#click-anime-left {
  position: relative;
}
#click-anime-left,
#click-anime-right {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 52px;
  left: 48px;
  background-position: 0 0;
  background: url(../images/main/clickAnime.png) no-repeat;
  animation: clickAnime 0.8s steps(8) infinite;
}
@keyframes clickAnime {
  to {
    background-position: -400px 0;
  }
}

.panda {
  position: absolute;
  width: 45px;
  height: 45px;
  background-position: 0 0;
}
.panda-rakugaki0 {
  background: url(../images/main/chara_panda_rakugaki0.png) no-repeat;
}
.panda-rakugaki1 {
  background: url(../images/main/chara_panda_rakugaki1.png) no-repeat;
}
.panda-rakugaki2 {
  background: url(../images/main/chara_panda_rakugaki2.png) no-repeat;
}
.panda-rakugaki3 {
  background: url(../images/main/chara_panda_rakugaki3.png) no-repeat;
}
.panda-rakugaki4 {
  background: url(../images/main/chara_panda_rakugaki4.png) no-repeat;
}

#cout-down-area {
  position: absolute;
  background-color: rgba(0, 255, 255, 0.308);
  top: 100px;
  left: 60px;
  width: 150px;
  height: 150px;
  background: url(../images/main/count_3.png) no-repeat;
  display: none;
}

.panda-countdown0 {
  background: url(../images/main/chara_panda_count0.png) no-repeat;
}
.panda-countdown1 {
  background: url(../images/main/chara_panda_count1.png) no-repeat;
}
.panda-countdown2 {
  background: url(../images/main/chara_panda_count2.png) no-repeat;
}
.panda-countdown3 {
  background: url(../images/main/chara_panda_count3.png) no-repeat;
}

#start-btn-area, #reset-btn-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  opacity: 0;
}
#start-btn-area img {
  width: 100%;
}
.fade-up {
  opacity: 0;
  animation-name: fadeinup;
  animation-duration: 0.6s;
  animation-delay: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadeinup {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#reset-btn-area img {
  width: 100%;
}

.panda-stand {
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: 0 0;
  background: url(../images/main/chara_panda_stand.png) no-repeat;
  animation: pandaStandAnime 1s steps(2) infinite;
}

@keyframes pandaStandAnime {
  to {
    background-position: -88px 0;
  }
}

.panda-walk {
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: 0 0;
  background: url(../images/main/chara_panda_walk.png) no-repeat;
  animation: pandaWalkAnime 1s steps(2) infinite;
}

@keyframes pandaWalkAnime {
  to {
    background-position: -88px 0;
  }
}

.panda-smile {
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: 0 0;
  background: url(../images/main/chara_panda_smile.png) no-repeat;
  animation: pandaSmileAnime 1s steps(2) infinite;
}

@keyframes pandaSmileAnime {
  to {
    background-position: -88px 0;
  }
}

.panda-cly {
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: 0 0;
  background: url(../images/main/chara_panda_cry.png) no-repeat;
  animation: pandaClyAnime 1s steps(2) infinite;
}

@keyframes pandaClyAnime {
  to {
    background-position: -88px 0;
  }
}

.panda-sleep {
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: 0 0;
  background: url(../images/main/chara_panda_sleep.png) no-repeat;
  animation: pandaSleepAnime 1s steps(2) infinite;
}

@keyframes pandaSleepAnime {
  to {
    background-position: -88px 0;
  }
}

.board-box-shadow{
  box-shadow: #494949 1px 3px 6px;
}v