@keyframes animCloudPipe {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-1116.09756px, 0, 0);
  }
}

@keyframes animBird {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -272px, 0);
  }
}

@keyframes animPipe {
  0% {
    left: 728px;
  }

  100% {
    left: -728px;
  }
}

.rule-header {
  width: 100%;
}

#wapper {
  max-width: 1120px;
  margin: 0 auto;
}

#container {
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 445px) {
  #container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

#main {
  width: 100%;
}

#gamecontainer {
  position: relative;
  width: 100%;
  max-width: 728px;
  height: 440px;
}

@media screen and (max-width: 445px) {
  #gamecontainer {
    max-width: 375px;
    height: 310px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 320px) {
  #gamecontainer {
    max-width: 320px;
    height: 320px;
  }
}

/*
Screen - Game
*/
#gamescreen {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

#sky {
  width: 400%;
  height: 440px;
  background: url("../../images/toripop/sky.png") repeat-x;
  background-size: contain;
  animation: animDeepSea 7s linear infinite;
}

@media screen and (max-width: 445px) {
  #sky {
    height: 310px;
    animation: animDeepSeaSp 7s linear infinite;
  }
}

@media screen and (max-width: 320px) {
  #sky {
    height: 320px;
    animation: animDeepSeaSpSmall 7s linear infinite;
  }
}

#flyarea {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#ceiling {
  position: absolute;
  top: 0px;
  height: 1px;
  width: 100%;
  background-color: #333333;
}

#land {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: #333333;
}

#bigscore {
  display: none;
  font-size: 36px;
  font-weight: bold;
  color: #000000;
  position: absolute;
  top: 20px;
  left: 70px;
  z-index: 40;
}

.cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

/* @media screen and (max-width: 445px) {
  .cover {
    top: 25px;
  }
}

@media screen and (max-width: 320px) {
  .cover {
    top: 20px;
  }
} */

#splash {
  background-image: url("../../images/toripop/splash.png");
  background-repeat: no-repeat;
  z-index: 100;
}

@media screen and (max-width: 445px) {
  #splash {
    background-image: url("../../images/toripop/splash-sp.png");
    background-position: center;
  }
}

@media screen and (max-width: 320px) {
  #splash {
    background-image: url("../../images/toripop/splash-sp-small.png");
    background-position: center;
  }
}

.play_count_info {
    background: #ffe451;
    font-size: 21px;
    padding: 0 10px;
    text-align: center;
    color: #000000;
    border-radius: 10px;
    box-shadow: 10px -10px 10px #e79d33;
}

@media screen and (max-width: 445px) {
    .play_count_info {
        font-size: 18px;
        margin: 20px;
    }
  }

.play_count_info span {
    font-weight: bold;
    color: #116df2;
}

.play_count_info img {
    float: right;
    width: 30px;
    height: 30px;
}

#buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 260px 20% 0 20%;
  width: 60%;
}

@media screen and (max-width: 445px) {
  #buttons {
    margin-top: 220px;
  }
}

@media screen and (max-width: 320px) {
  #buttons {
    margin-top: 230px;
  }
}

#buttons_top {
  display: flex;
}

#buttons_bottom {
  display: flex;
  justify-content: space-between;
}

#pointcheck_buttons {
  display: flex;
  justify-content: center;
}

#start {
  width: 100%;
  cursor: pointer;
}

#showpoint,
#showrule {
  width: 45%;
  margin: 30px 0 0;
  cursor: pointer;
}

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

  #showpoint,
  #showrule {
    margin-top: 6px;
    font-size: 14px;
  }
}

#play_guide_1,
#play_guide_2,
#gameover,
#stageclear,
#scorecheck,
#pointcheck {
  display: none;
  z-index: 120;
}

.popup {
  display: flex;
  flex-direction: column;
  margin: 8px;
  background-color: #78ccfd;
  border-radius: 16px;
}

@media screen and (max-width: 445px) {
  .popup {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  .popup {
    margin: 8px 0;
  }
}

@media screen and (max-width: 445px) {
  .rule-popup {
    margin-top: 8px;
  }
}

.pointcheck-popup {
  margin-top: 72px;
}

@media screen and (max-width: 445px) {
  .pointcheck-popup {
    margin-top: 48px;
  }
}

.popup_title {
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 445px) {
  .popup_title {
    font-size: 24px;
  }
}

#score_value {
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}

@media screen and (max-width: 445px) {
  #score_value {
    font-size: 24px;
  }
}

.point {
  font-size: 18px;
}

@media screen and (max-width: 320px) {
  .point {
    font-size: 10px;
  }
}

#showscore,
#gototop,
#next,
#closepoint,
#next_play_guide_1,
#next_play_guide_2 {
  margin: 4px auto 8px auto;
  width: 80%;
}

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

  #showscore,
  #gototop,
  #next,
  #closepoint,
  #next_play_guide_1,
  #next_play_guide_2 {
    margin-top: 6px;
    margin-bottom: 6px;
    width: 80%;
  }
}

#play_guide_title_1,
#play_guide_title_2,
#unfortunately,
#congratulations,
#finalscore,
#nowpoint {
  margin-top: 8px;
}

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

  #play_guide_title_1,
  #play_guide_title_2,
  #unfortunately,
  #congratulations,
  #finalscore,
  #nowpoint {
    margin-top: 8px;
  }
}

#nowpoint {
  margin-bottom: 8px;
}

.boundingbox {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 1px solid red;
}

#player {
  left: 60px;
  top: 200px;
}

#playermessage {
  display: none;
  position: absolute;
  font-weight: bold;
  font-size: 24px;
  z-index: 40;
}

#message {
  display: none;
  position: absolute;
  left: 60px;
  bottom: 50px;
  font-weight: bold;
  font-size: 16px;
  color: #d6000c;
  z-index: 40;
}

#startmessage {
  width: 100%;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 30px;
  color: #000000;
  text-align: center;
  z-index: 40;
}

#countdown {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 128px;
  color: #000000;
  z-index: 40;
}

.bird {
  position: absolute;
  width: 68px;
  height: 68px;
  overflow: hidden;
}

.bird .before-bird {
  content: "";
  display: block;
  width: 100%;
  height: 400%;
  background-image: url("../../images/toripop/bird.png");
  animation: animBird 400ms steps(4) infinite;
}

.pipe {
  position: absolute;
  left: 0;
  width: 52px;
  height: 100%;
  z-index: 20;
  animation: animPipe 7500ms linear;
}

.pipe_upper {
  position: absolute;
  top: 0;
  width: 52px;
  background-image: url("../../images/toripop/pipe.png");
  background-repeat: repeat-y;
  background-position: center;
}

.pipe_upper:after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 52px;
  height: 26px;
  background-image: url("../../images/toripop/pipe-down.png");
}

.pipe_lower {
  position: absolute;
  bottom: 0;
  width: 52px;
  background-image: url("../../images/toripop/pipe.png");
  background-repeat: repeat-y;
  background-position: center;
}

.pipe_lower:after {
  content: "";
  position: absolute;
  top: -12px;
  width: 52px;
  height: 26px;
  background-image: url("../../images/toripop/pipe-up.png");
}