.test {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/test.png);
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1000;
  display: none;
}

/*reset*/
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
strong,
dl,
dt,
dd,
ol,
ul,
li,
form,
article,
aside,
footer,
header,
nav,
section,
summary,
audio,
video {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

audio {
  display: none;
}

* {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: contain;
  tap-highlight-color: rgba(0, 0, 0, 0);
  -o-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-touch-callout: none;
  -o-user-touch-callout: none;
  -ms-user-touch-callout: none;
  -moz-user-touch-callout: none;
  -webkit-user-touch-callout: none;
}

html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-content-zooming: none;
}

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-family: "Oswald";
  background-color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -ms-content-zooming: none;
}

#main {
  width: 1622px;
  height: 775px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -811px;
  margin-top: -387.5px;
}

#navi {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

#navi #navi_init {
  position: absolute;
  top: 56px;
  left: 23px;
  width: 129px;
  height: 129px;
  background: url(../img/navi_init_btn.png);
  cursor: default;
}

#navi #navi_yaruki {
  position: absolute;
  top: 379px;
  left: 1469px;
  width: 129px;
  height: 204px;
  background: url(../img/navi_yaruki_btn.gif);
  cursor: default;
}

#navi #navi_init:active,
#navi #navi_yaruki:active {
  filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
}

@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
@-webkit-keyframes addScore {
  0% {
    top: 124px;
  }
  100% {
    top: 94px;
  }
}
@keyframes addScore {
  0% {
    top: 124px;
  }
  100% {
    top: 94px;
  }
}
.s_next {
  position: absolute;
  left: 1469px;
  top: 216px;
  width: 129px;
  height: 129px;
  opacity: 0;
  transition: none;
  background-image: url(../img/main_next_btn.png);
}

.s_next:active {
  filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
}

.s_next.enable.blink {
  transition: 0.2s ease-in-out;
  -webkit-animation: blink 0.5s infinite alternate;
          animation: blink 0.5s infinite alternate;
}

.s_prev,
.quit_continue_btn {
  position: absolute;
  left: 24px;
  top: 216px;
  width: 129px;
  height: 129px;
  transition: none;
  background-image: url(../img/main_prev_btn.png);
}

.s_prev:active,
.quit_continue_btn:active {
  filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
}

.s_next.enable,
.s_prev.enable,
.s_next.disable,
.s_prev.disable {
  opacity: 1;
}

.quit_continue_btn {
  background-image: url(../img/btn_stop.png);
  display: none;
}

.font {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

#container {
  width: 1280px;
  height: 775px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

@-webkit-keyframes startShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes startShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes endShow {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes endShow {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@-webkit-keyframes startHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes startHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes star {
  0% {
    background-size: contain, 0;
  }
  50% {
    background-size: 0, contain;
  }
}
@keyframes star {
  0% {
    background-size: contain, 0;
  }
  50% {
    background-size: 0, contain;
  }
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
strong,
dl,
dt,
dd,
ol,
ul,
li,
form,
article,
aside,
footer,
header,
nav,
section,
summary,
audio,
video {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "NotoSansJP";
  font-weight: normal;
  font-style: normal;
  src: url("../font/NotoSansJP-Medium.woff") format("woff"), url("../font/NotoSansJP-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Oswald";
  font-weight: normal;
  font-style: normal;
  src: url("../font/Oswald-Medium.woff") format("woff"), url("../font/Oswald-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Oswald";
  font-weight: semibold;
  font-style: normal;
  src: url("../font/Oswald-SemiBold.woff") format("woff"), url("../font/Oswald-SemiBold.ttf") format("truetype");
}
* {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: contain;
  tap-highlight-color: rgba(0, 0, 0, 0);
  -o-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-touch-callout: none;
  -o-user-touch-callout: none;
  -ms-user-touch-callout: none;
  -moz-user-touch-callout: none;
  -webkit-user-touch-callout: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

audio {
  display: none;
}

#frame {
  width: 100%;
  height: 100%;
  position: relative;
}

.page {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.page > * {
  position: absolute;
}

.btn {
  width: 324px;
  height: 141px;
  cursor: pointer;
}

#top {
  background-image: url(../img/top.png);
}
#top .first_btn {
  background-image: url(../img/btn_start.png);
  width: 316px;
  height: 110px;
  left: 0;
  right: 0;
  bottom: 52px;
  margin: auto;
}

#infomation {
  background-image: url(../img/infomation1.png), url(../img/infomation2.png), url(../img/infomation3.png);
  background-size: 0, 0, 0;
}
#infomation[data-num="1"] {
  background-size: contain, 0, 0;
}
#infomation[data-num="2"] {
  background-size: 0, contain, 0;
}
#infomation[data-num="3"] {
  background-size: 0, 0, contain;
}

#game {
  background-image: url(../img/game_bg.png);
}
#game .remain,
#game .score {
  font-family: NotoSansJP;
  color: #D8FFFF;
  top: 37px;
  text-align: right;
  font-size: 52px;
}
#game .remain {
  right: 121px;
}
#game .score {
  right: 557px;
  letter-spacing: 2px;
  font-weight: bold;
}
#game .score_add {
  width: 94px;
  height: 29px;
  right: 530px;
  top: 124px;
  background-image: url(../img/score_add_1.png), url(../img/score_add_2.png);
  background-size: contain, 0;
  -webkit-animation-name: addScore;
          animation-name: addScore;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  display: none;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
#game .score_add[data-num="2"] {
  background-size: 0, contain;
}
#game .speed {
  width: 236px;
  height: 236px;
  background-image: url(../img/speed_1.png), url(../img/speed_2.png), url(../img/speed_3.png), url(../img/speed_4.png), url(../img/speed_5.png);
  background-size: 0, 0, 0, 0, 0;
  left: 16px;
  top: 18px;
}
#game .player {
  position: absolute;
  left: 534px;
  bottom: 96px;
  width: 196px;
  height: 205px;
  background-image: url(../img/player.png), url(../img/player_damaged.png);
  background-size: contain, 0;
}
#game .player[data-state="1"] {
  background-size: 0, contain;
}
#game .player[data-position=left] {
  left: 380px;
}
#game .player[data-position=right] {
  left: 674px;
}
#game .damaged {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url(../img/damaged.png);
  display: none;
}
#game .lane_wrapper {
  width: 100%;
  pointer-events: none;
}
#game .lane {
  width: 100%;
}
#game .lane .object {
  position: absolute;
  transform: scale(0.2);
  transform-origin: center bottom;
  bottom: -150px;
  opacity: 0;
}
#game .lane .object[data-type=shougai] {
  width: 100px;
  height: 108px;
  background-size: contain;
}
#game .lane .object[data-type=shougai][data-num="1"] {
  background-image: url(../img/shougai.png);
}
#game .lane .object[data-type=star] {
  background-size: contain;
  width: 98px;
  height: 88px;
}
#game .lane .object[data-type=star][data-num="1"] {
  background-image: url(../img/star_1.png);
}
#game .lane .object[data-type=star][data-num="2"] {
  background-image: url(../img/star_2.png);
}
#game .lane .object[data-type=star][data-state="1"] {
  opacity: 0;
  display: none;
}
#game .lane.center .object {
  left: 590px;
}
#game .lane_line {
  width: 850px;
  border: 1px solid #fff;
  position: absolute;
  transform: scale(0.2);
  transform-origin: center bottom;
  bottom: -150px;
  left: 216px;
  margin-bottom: 30px;
}
#game[data-speed="1"] .speed {
  background-size: contain, 0, 0, 0, 0;
}
#game[data-speed="2"] .speed {
  background-size: 0, contain, 0, 0, 0;
}
#game[data-speed="3"] .speed {
  background-size: 0, 0, contain, 0, 0;
}
#game[data-speed="4"] .speed {
  background-size: 0, 0, 0, contain, 0;
}
#game[data-speed="5"] .speed {
  background-size: 0, 0, 0, 0, contain;
}

.game_start {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background-image: url(../img/game_start_str_3.png), url(../img/game_start_str_2.png), url(../img/game_start_str_1.png), url(../img/game_start_str_start.png);
  background-size: 0, 0, 0, 0;
}
.game_start .game_start_tap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/game_start.png);
}
.game_start[data-num="3"], .game_start[data-num="2"], .game_start[data-num="1"], .game_start[data-num="0"] {
  background-color: rgba(0, 0, 0, 0.5);
}
.game_start[data-num="3"] .game_start_tap, .game_start[data-num="2"] .game_start_tap, .game_start[data-num="1"] .game_start_tap, .game_start[data-num="0"] .game_start_tap {
  display: none;
}
.game_start[data-num="3"] {
  background-size: contain, 0, 0, 0;
}
.game_start[data-num="2"] {
  background-size: 0, contain, 0, 0;
}
.game_start[data-num="1"] {
  background-size: 0, 0, contain, 0;
}
.game_start[data-num="0"] {
  background-size: 0, 0, 0, contain;
}

.game_end {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: none;
  background-image: url(../img/game_end.png);
}

.game_result {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/game_result.png);
  z-index: 1;
  display: none;
}
.game_result .result {
  font-family: NotoSansJP;
  font-size: 138px;
  font-weight: bold;
  color: #FF1122;
  text-align: right;
  position: absolute;
  top: 304px;
  right: 522px;
  letter-spacing: 4px;
  display: none;
}
.game_result .end_btn {
  position: absolute;
  width: 264px;
  height: 91px;
  left: 508px;
  bottom: 134px;
  background-image: url(../img/end_btn.png);
}

.left_btn,
.center_btn,
.right_btn {
  width: 167px;
  height: 122px;
  background-size: contain, 0, 0;
  bottom: 1px;
  z-index: 1;
}
.left_btn:active,
.center_btn:active,
.right_btn:active {
  background-size: 0, contain, 0;
}
.left_btn.disabled,
.center_btn.disabled,
.right_btn.disabled {
  background-size: 0, 0, contain;
  pointer-events: none;
}

.left_btn {
  left: 386px;
  background-image: url(../img/left_btn.png), url(../img/left_btn_active.png), url(../img/left_btn_disabled.png);
}

.center_btn {
  left: 556px;
  background-image: url(../img/center_btn.png), url(../img/center_btn_active.png), url(../img/center_btn_disabled.png);
}

.right_btn {
  left: 724px;
  background-image: url(../img/right_btn.png), url(../img/right_btn_active.png), url(../img/right_btn_disabled.png);
}/*# sourceMappingURL=style.css.map */