@charset "UTF-8";
/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, figure, button, table, caption, tbody, tfoot, thead, tr, th, td, button {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  text-align: left;
  vertical-align: baseline;
  background-color: transparent;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

a {
  text-decoration: none; }

a img, :link img, :visited img {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul, ol {
  list-style-type: none; }

ul li img {
  vertical-align: top; }

/* -------------------------------------------------- */
.game {
  position: relative;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden; }
  .game .game_main {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*overflow:auto;*/
    /*-webkit-overflow-scrolling: touch;*/
    background-size: 100% auto;
    background-image: url(../img/sea_2.jpg); }
    .game .game_main:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-image: url(../img/croud.png); }
    .game .game_main .game_lands {
      position: relative;
      padding: 0 0 100vh;
      background-size: 100% auto;
      background-image: url(../img/sea.jpg); }
      .game .game_main .game_lands li {
        position: relative;
        margin: calc((100vh - 40vw)/2) auto -10vw;
        width: 100%;
        height: 40vw;
        list-style: none;
        background-repeat: no-repeat;
        background-size: 100% auto; }
        .game .game_main .game_lands li:after, .game .game_main .game_lands li:before {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-size: 100% auto; }
        .game .game_main .game_lands li:after {
          top: 70vw;
          left: 71vw;
          width: 23vw;
          height: 16vw;
          background-image: url(../img/obj_shark.png); }
        .game .game_main .game_lands li:before {
          top: 50vw;
          left: 8vw;
          width: 38.5vw;
          height: 20vw;
          background-image: url(../img/crowd_l.png); }
        .game .game_main .game_lands li:nth-child(even):after {
          left: 11vw;
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }
        .game .game_main .game_lands li:nth-child(even):before {
          left: 60vw;
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }
        .game .game_main .game_lands li[class^="land_"] {
          text-align: center;
          background-image: url(../img/land_bg.png); }
          .game .game_main .game_lands li[class^="land_"] img {
            width: auto;
            height: 100%; }
  .game .stone {
    position: absolute;
    top: calc((100vh - 40vw)/2);
    left: 30vw;
    width: 40vw;
    height: 40vw;
    color: red;
    text-align: center;
    background-size: 100% auto;
    background-image: url(../img/ball_normal.png); }
  .game .game_ui {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); }
    .game .game_ui > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      -webkit-transition: opacity 200ms ease-out;
      -o-transition: opacity 200ms ease-out;
      transition: opacity 200ms ease-out;
      pointer-events: none; }
      .game .game_ui > div.game_ui_pc {
        margin: 0 auto;
        top: 45%;
        left: 10%;
        padding: 4%;
        width: 80%;
        height: auto;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        border: 3px solid #b83800;
        -webkit-box-shadow: 0 0 0 3px #fff;
        box-shadow: 0 0 0 3px #fff; }
        .game .game_ui > div.game_ui_pc h2 img {
          width: 100%; }
        .game .game_ui > div.game_ui_pc figure {
          display: inline-block;
          width: 66%; }
          .game .game_ui > div.game_ui_pc figure img {
            width: 100%; }
      .game .game_ui > div.game_ui_loading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .game .game_ui > div.game_ui_loading h2 {
          font-size: 2rem;
          background-color: #fff; }
      .game .game_ui > div.game_ui_start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .game .game_ui > div.game_ui_start h3 {
          margin: 0 auto;
          width: 90%; }
          .game .game_ui > div.game_ui_start h3 img {
            width: 100%; }
        .game .game_ui > div.game_ui_start figure {
          margin: 0 auto;
          width: 60%; }
          .game .game_ui > div.game_ui_start figure img {
            width: 100%; }
        .game .game_ui > div.game_ui_start .btn_start {
          width: 80%; }
          .game .game_ui > div.game_ui_start .btn_start img {
            width: 100%; }
      .game .game_ui > div.game_ui_ready {
        z-index: 0; }
        .game .game_ui > div.game_ui_ready img {
          width: 100%; }
        .game .game_ui > div.game_ui_ready .ready_arrow,
        .game .game_ui > div.game_ui_ready .ready_hand {
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none; }
        .game .game_ui > div.game_ui_ready .ready_arrow {
          top: 10vw;
          left: 35%;
          width: 30%;
          opacity: 0; }
        .game .game_ui > div.game_ui_ready .ready_hand {
          top: 84vw;
          left: 50%;
          width: 30%; }
      .game .game_ui > div.game_ui_play .btn_goal {
        position: absolute;
        bottom: 32vw;
        right: 4vw;
        width: 30vw;
        pointer-events: none;
        opacity: 0; }
        .game .game_ui > div.game_ui_play .btn_goal img {
          width: 100%; }
        .game .game_ui > div.game_ui_play .btn_goal[data-state="on"] {
          pointer-events: auto;
          opacity: 1; }
      .game .game_ui > div.game_ui_result {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .game .game_ui > div.game_ui_result .result_window {
          padding: 36vw 5vw 4vw;
          width: 80%;
          background-repeat: no-repeat;
          background-color: transparent;
          background-image: url(../img/result_bg_1.png), -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff));
          background-image: url(../img/result_bg_1.png), -webkit-linear-gradient(bottom, #fff 0%, #fff 100%);
          background-image: url(../img/result_bg_1.png), -o-linear-gradient(bottom, #fff 0%, #fff 100%);
          background-image: url(../img/result_bg_1.png), linear-gradient(0deg, #fff 0%, #fff 100%);
          background-position: center top, center 50vw;
          background-size: 100% auto;
          border-radius: 10vw;
          opacity: 0;
          -webkit-transition: all 1200ms ease-out;
          -o-transition: all 1200ms ease-out;
          transition: all 1200ms ease-out;
          z-index: 1; }
          .game .game_ui > div.game_ui_result .result_window[data-state=""] {
            background-image: url(../img/result_bg_2.png), -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff));
            background-image: url(../img/result_bg_2.png), -webkit-linear-gradient(bottom, #fff 0%, #fff 100%);
            background-image: url(../img/result_bg_2.png), -o-linear-gradient(bottom, #fff 0%, #fff 100%);
            background-image: url(../img/result_bg_2.png), linear-gradient(0deg, #fff 0%, #fff 100%); }
            .game .game_ui > div.game_ui_result .result_window[data-state=""] h3 {
              width: 100%; }
            .game .game_ui > div.game_ui_result .result_window[data-state=""] .result_btns .btn_pv {
              display: none; }
            .game .game_ui > div.game_ui_result .result_window[data-state=""] .result_btns .btn_tweet {
              display: none; }
          .game .game_ui > div.game_ui_result .result_window[data-state="land"] .result_btns .btn_pv {
            display: none; }
          .game .game_ui > div.game_ui_result .result_window[data-state="land_14"] .result_miss_text {
            display: none; }
          .game .game_ui > div.game_ui_result .result_window .result_title {
            position: relative;
            margin: 0 auto;
            width: 80%;
            min-height: 50vw;
            text-align: center; }
            .game .game_ui > div.game_ui_result .result_window .result_title img {
              width: 100%; }
          .game .game_ui > div.game_ui_result .result_window .result_miss_text {
            display: inline-block;
            padding: 1vw 0;
            width: 100%;
            text-align: center;
            font-size: .9rem;
            line-height: 1.3; }
          .game .game_ui > div.game_ui_result .result_window .result_btns {
            padding: 0% 0 2%;
            margin: 0 auto;
            width: 82%;
            text-align: center; }
            .game .game_ui > div.game_ui_result .result_window .result_btns button {
              display: inline-block; }
              .game .game_ui > div.game_ui_result .result_window .result_btns button img {
                width: 100%; }
  .game[data-state="pc"] .game_ui {
    display: block; }
    .game[data-state="pc"] .game_ui div.game_ui_pc {
      opacity: 1;
      z-index: 2; }
    .game[data-state="pc"] .game_ui div.game_ui_start {
      opacity: 1;
      z-index: 1; }
  .game[data-state="load"] .game_ui {
    display: block; }
    .game[data-state="load"] .game_ui div.game_ui_loading {
      opacity: 1;
      pointer-events: auto; }
  .game[data-state="start"] .game_ui {
    display: block; }
    .game[data-state="start"] .game_ui div.game_ui_start {
      opacity: 1;
      pointer-events: auto; }
  .game[data-state="move"] .game_ui {
    display: block;
    background-color: transparent; }
  .game[data-state="ready"]:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30% auto;
    background-image: url(../img/swipe_info_arrow.png); }
  .game[data-state="ready"] .game_ui {
    display: block;
    background-color: transparent;
    z-index: 2; }
    .game[data-state="ready"] .game_ui div.game_ui_ready {
      opacity: 1; }
      .game[data-state="ready"] .game_ui div.game_ui_ready:before, .game[data-state="ready"] .game_ui div.game_ui_ready:after {
        position: absolute;
        left: 0;
        display: inline-block;
        padding: 2vw 0;
        width: 100%;
        height: 20vw;
        font-size: 1.2rem;
        line-height: 1.3;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.8);
        white-space: pre;
        z-index: 3; }
      .game[data-state="ready"] .game_ui div.game_ui_ready:before {
        content: 'このあたりまで引っ張って\A前に弾いて';
        bottom: 5vw; }
      .game[data-state="ready"] .game_ui div.game_ui_ready:after {
        content: 'このあたりで放す！';
        top: 5vw; }
      .game[data-state="ready"] .game_ui div.game_ui_ready .ready_arrow {
        z-index: -1; }
      .game[data-state="ready"] .game_ui div.game_ui_ready .ready_hand {
        -webkit-animation: ready_hand 3s linear infinite;
        animation: ready_hand 3s linear infinite;
        z-index: 2; }
  .game[data-state="ready"] .stone {
    -webkit-animation: ready_stone 3s linear infinite;
    animation: ready_stone 3s linear infinite;
    z-index: 1; }
  .game[data-state="play"] .game_ui {
    display: block;
    background-color: transparent;
    pointer-events: none; }
    .game[data-state="play"] .game_ui div.game_ui_play {
      opacity: 1; }
      .game[data-state="play"] .game_ui div.game_ui_play:before, .game[data-state="play"] .game_ui div.game_ui_play:after {
        content: '';
        position: absolute;
        left: 0;
        display: inline-block;
        padding: 2vw 0;
        width: 100%;
        height: 20vw;
        font-size: 1.2rem;
        line-height: 1.3;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.8);
        white-space: pre;
        z-index: 3; }
      .game[data-state="play"] .game_ui div.game_ui_play:before {
        bottom: 5vw; }
      .game[data-state="play"] .game_ui div.game_ui_play:after {
        top: 5vw; }
      .game[data-state="play"] .game_ui div.game_ui_play .btn_goal {
        pointer-events: auto; }
  .game[data-state="throw"] {
    overflow: hidden; }
  .game[data-state="result"] .game_ui {
    display: block; }
    .game[data-state="result"] .game_ui div.game_ui_result {
      opacity: 1;
      pointer-events: auto; }
      .game[data-state="result"] .game_ui div.game_ui_result .result_window {
        opacity: 1;
        pointer-events: auto; }

@-webkit-keyframes ready_stone {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  10%, 30% {
    -webkit-transform: translateY(50vw);
    transform: translateY(50vw); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  60%, 90% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes ready_stone {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  10%, 30% {
    -webkit-transform: translateY(50vw);
    transform: translateY(50vw); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  60%, 90% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes ready_hand {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  10%, 30% {
    -webkit-transform: translateY(50vw);
    transform: translateY(50vw);
    opacity: 1; }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  60% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw);
    opacity: 1; }
  92%, 90% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }

@keyframes ready_hand {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  10%, 30% {
    -webkit-transform: translateY(50vw);
    transform: translateY(50vw);
    opacity: 1; }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; }
  60% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw);
    opacity: 1; }
  92%, 90% {
    -webkit-transform: translateY(-50vw);
    transform: translateY(-50vw);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1; } }