/* ============================================= /
/ [ フォント ]
/ ==============================================*/


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


*/
@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Gugi&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');
/* ============================================= /
/ [リセット]
/ ==============================================*/
* {
  margin: 0;
  padding: 0;
}
html, body {
  font-family: 'Changa One', cursive;
  user-select: none;
}
body {
  background-color: #0d7e0c;
  background-image:  linear-gradient(135deg, #006818 25%, transparent 25%), linear-gradient(225deg, #006818 25%, transparent 25%), linear-gradient(45deg, #006818 25%, transparent 25%), linear-gradient(315deg, #006818 25%, #0d7e0c 25%);
  background-position:  4px 0, 4px 0, 0 0, 0 0;
  background-size: 4px 4px;
  background-repeat: repeat;
}
body:before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(86,113,0);
  background: radial-gradient(circle, rgba(86,113,0,0.3841911764705882) 0%, rgba(19,113,0,1) 100%);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
/* ============================================= /
/ [コンテンツ]
/ ==============================================*/
.contents {
  height: 100vh;
  position: relative;
  display: none;
}
.contents:before {
}
.contents.show {
  display: block;
}
  .contents-inner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
  }
/* ============================================= /
/ [ボタン]
/ ==============================================*/
.button {
  width: 100px;
  height: 100px;
  color: rgba(0,0,0,.4);
  font-size: 20px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 2px 5px 1px rgba(0,0,0,.1);
  border: 4px solid rgba(115,78,48,1);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 100px;
  cursor: pointer;
  overflow: hidden;
  /* transition: 120ms; */
}
.button:hover {
  color: rgba(0,0,0,.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 1px 2px 1px rgba(0,0,0,.1);
}
.button:active {
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 rgba(255,255,255,.4);
}
.button:before {
  content: '';
  width: 150%;
  height: 30%;
  background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1));
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 1px;
  filter: blur(5px);
  transition: 120ms;
}
.button:hover:before {
}
.button:active:before {
  filter: blur(2px);
}
.button:after {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  position: absolute;
  box-shadow: 0 -2px 8px 1px rgba(255,255,255,.4) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
  transition: 150ms;
}
.button:hover:after {
  box-shadow: 0 0 4px 1px rgba(255,255,255,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
}

.button:active:after {
  box-shadow: 0 -2px 4px 1px rgba(0,0,0,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
}
/* ============================================= /
/ [スタートボタン]
/ ==============================================*/
.button.start {
  background: linear-gradient(0deg, #ff8100, #ffb365 20%, #ff8100 85%, #ffb365);
  box-shadow:
  0 0 20px 10px #c36300 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(255, 145, 0, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6);
  top: calc(50% + 100px);
  left: calc(50% - 10px);
  transform: translateX(-50%);
}
.button.start:hover {
  background: linear-gradient(0deg, #ff8100, #ff8100);
  box-shadow:
  0 0 20px 10px #c36300 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(255, 145, 0, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 0 40px #ff8000;
}
.button.start:active {
  box-shadow:
  0 0 20px 10px #c36300 inset,
  0px 19px 13px rgba(255, 255, 255, 0) inset,
  0 -19px 4px -5px rgba(255, 145, 0, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 2px 5px #ff8000;
}
/* ============================================= /
/ [ヒット・スタンド・リプレイ・タイトルボタン]
/ ==============================================*/
.button.regist,
.button.title {
  background: linear-gradient(0deg, #00c3ba, #67efe9 20%, #00c3ba 85%, #67efe9);
  box-shadow:
  0 0 20px 10px #0687a5 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(6,135,165, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6);
}
.button.regist:hover,
.button.title:hover {
  background: linear-gradient(0deg, #00c3ba, #00c3ba);
  box-shadow:
  0 0 20px 10px #0687a5 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(6,135,165, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 0 20px #00c3ba;
}
.button.regist:active,
.button.title:active {
  box-shadow:
  0 0 20px 10px #0687a5 inset,
  0px 19px 13px rgba(255, 255, 255, 0) inset,
  0 -19px 4px -5px rgba(6,135,165, 0) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 2px 5px #00c3ba;
}

/* [ヒット] */
.button.hit {
  background: linear-gradient(0deg, #fdde00, #c79c00 20%, #fdde00 85%, #c79c00);
  box-shadow:
  0 0 20px 10px #b7a001 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(253,222,0, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6);
}
.button.hit:hover {
  background: linear-gradient(0deg, #fdde00, #fdde00);
  box-shadow:
  0 0 20px 10px #b7a001 inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(253,222,0, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 0 20px #fdde00;
}
.button.hit:active {
  box-shadow:
  0 0 20px 10px #b7a001 inset,
  0px 19px 13px rgba(255, 255, 255, 0) inset,
  0 -19px 4px -5px rgba(253,222,0, 0) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 2px 5px #fdde00;
}
/* [スタンド] */
.button.stand {
  background: linear-gradient(0deg, #e70055, #fd5895 20%, #e70055 85%, #fd5895);
  box-shadow:
  0 0 20px 10px #c50b4f inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(197,11,79, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6);
}
.button.stand:hover {
  background: linear-gradient(0deg, #e70055, #e70055);
  box-shadow:
  0 0 20px 10px #c50b4f inset,
  0px 19px 13px rgba(255, 255, 255, .8) inset,
  0 -19px 4px -5px rgba(197,11,79, .8) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 0 20px #ff307c;
}
.button.stand:active {
  box-shadow:
  0 0 20px 10px #c50b4f inset,
  0px 19px 13px rgba(255, 255, 255, 0) inset,
  0 -19px 4px -5px rgba(197,11,79, 0) inset,
  0 0 0 48px rgba(255,255,255,.15) inset,
  0 2px 4px rgba(0,0,0,.6),
  0 2px 5px #ff307c;
}


/* [icon] */
.button .icon {
  font-size: 52px;
}

/* ============================================= /
/ [ボタン位置調整(ゲームプレイ中表示)]
/ ==============================================*/
.button.game {
  top: 540px;
  transform: translateX(-50%) scale(.8);
}
/* [ヒット] */
.button.hit {
  left: calc(50% - 368px);
}
/* [スタンド] */
.button.stand {
  left: calc(50% - 270px);
}
/* [登録] */
.button.regist {
  top: calc(100% + 20px);
  left: calc(50% - 147px);
}
/* [タイトル] */
.button.title {
  top: calc(100% + 20px);
  left: calc(50% + 41px);
}
/* ============================================= /
/ [ボタン非活性]
/ ==============================================*/
.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  color: rgba(255,255,255,.4);
  font-size: 20px;
  text-shadow: -1px -1px 1px rgba(0,0,0,.1);
  background: rgba(200,200,200,.25);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
  cursor: default;
  transform: translateX(-50%) scale(.8);
}
.button.disabled:before,
.button.disabled:hover:before,
.button.disabled:active:before {
  content: '';
  width: 150%;
  height: 20%;
  background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1));
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 1px;
  filter: blur(13px);
}
.button.disabled:after,
.button.disabled:hover:after,
.button.disabled:active:after {
  box-shadow: 0 -2px 8px 1px rgba(255,255,255,.4) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
}
/* ============================================= /
/ [ダブルボタン]
/ ==============================================*/
.d-buttons {
  width: 120px;
  height: 80px;
  position: absolute;
  top: 551px;
  left: calc(50% - 200px);
}
  .d-button {
    height: 50%;
    font-size: 18px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 2px 5px 1px rgba(0,0,0,.1);
    border: 4px solid rgba(115,78,48,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }
    .d-button .icon {
      font-size: 32px;
      position: relative;
      left: -5px;
    }
  .d-button:hover {
    color: rgba(0,0,0,.2);
    text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 1px 2px 1px rgba(0,0,0,.1);
  }
  .d-button:active {
    /* font-size: 18px; */
    text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 rgba(255,255,255,.4);
  }
    
  .d-button:before,
  .d-button:after {
    content: '';
    position: absolute;
  }
  .d-button:before {
    width: 150%;
    height: 20%;
    background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1));
    display: block;
    top: 5px;
    filter: blur(6px);
    transition: 120ms;
  }
  .d-button:after {
    width: 100%;
    height: 100%;
    display: flex;
    box-shadow: 0 -1px 4px 1px rgba(255,255,255,.4) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
    transition: 150ms;
  }


  .d-button:active:before {
    filter: blur(6px);
  }
  .d-button:hover:after {
    box-shadow: 0 0 4px 1px rgba(255,255,255,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
  }
  
  .d-button:active:after {
    box-shadow: 0 -2px 2px 1px rgba(0,0,0,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.0) inset;
  }
  

  
  /* [次のゲーム] */
  .d-button.next {
    border-bottom: none;
    border-radius: 25px 25px 0 0;
    background: #f00;
  }
  .d-button.next:after {
    border-radius: 19px 19px 0 0;
  }
  .d-button.next {
    background: linear-gradient(0deg, #e1a600, #fdce49 20%, #e1a600 85%, #fdce49);
    box-shadow:
    0 0 20px 10px #c98c02 inset,
    0px 19px 13px rgba(255, 255, 255, .8) inset,
    0 -19px 4px -5px rgba(201,140,2, .8) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6);
  }
  .d-button.next:hover {
    background: linear-gradient(0deg, #e1a600, #e1a600);
    box-shadow:
    0 0 20px 10px #c98c02 inset,
    0px 19px 13px rgba(255, 255, 255, .8) inset,
    0 -19px 4px -5px rgba(201,140,2, .8) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6),
    0 -3px 23px #e1a600;
  }
  .d-button.next:active {
    box-shadow:
    0 0 20px 10px #c98c02 inset,
    0px 19px 13px rgba(255, 255, 255, 0) inset,
    0 -19px 4px -5px rgba(201,140,2, 0) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6),
    0 -1px 5px #e1a600;
  }

  /* [ゲーム終了] */
  .d-button.exit {
    border-radius: 0 0 25px 25px;
    background: #00f;
  }
  .d-button.exit:after {
    border-radius: 0 0 19px 19px;
  }
    .d-button.exit .icon {
      font-size: 26px;
    }
  .d-button.exit {
    background: linear-gradient(0deg, #00c3ba, #67efe9 20%, #00c3ba 85%, #67efe9);
    box-shadow:
    0 0 20px 10px #0687a5 inset,
    0px 19px 13px rgba(255, 255, 255, .8) inset,
    0 -19px 4px -5px rgba(6,135,165, .8) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6);
  }
  .d-button.exit:hover {
    background: linear-gradient(0deg, #00c3ba, #00c3ba);
    box-shadow:
    0 0 20px 10px #0687a5 inset,
    0px 19px 13px rgba(255, 255, 255, .8) inset,
    0 -19px 4px -5px rgba(6,135,165, .8) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6),
    0 7px 20px #00c3ba;
  }
  .d-button.exit:active {
    box-shadow:
    0 0 20px 10px #0687a5 inset,
    0px 19px 13px rgba(255, 255, 255, 0) inset,
    0 -19px 4px -5px rgba(6,135,165, 0) inset,
    0 0 0 48px rgba(255,255,255,.15) inset,
    0 2px 4px rgba(0,0,0,.6),
    0 2px 5px #00c3ba;
  }

/* [非活性] */
.d-button.disabled,
.d-button.disabled:hover,
.d-button.disabled:active {
  color: rgba(255,255,255,.4);
  font-size: 20px;
  text-shadow: -1px -1px 1px rgba(0,0,0,.1);
  background: rgba(200,200,200,.25);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
  cursor: default;
}
.d-button.disabled:before,
.d-button.disabled:hover:before,
.d-button.disabled:active:before {
  content: '';
  width: 150%;
  height: 20%;
  background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1));
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 1px;
  filter: blur(13px);
}
.d-button.disabled:after,
.d-button.disabled:hover:after,
.d-button.disabled:active:after {
  box-shadow: 0 -2px 8px 1px rgba(255,255,255,.4) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
}

  
/* ============================================= /
/ [タイトル]
/ ==============================================*/
.title-text {
  width: 100%;
  font-size: 90px;
  line-height: 1;
  color: rgba(255,255,255,.2);
  text-shadow: 3px 3px 0 rgba(0,0,0,.8), 1px 1px 0 rgba(255,255,255,.3), 0 0 5px rgba(0,0,0,.4);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 160px);
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
/* ============================================= /
/ [プッシュスタートボタン]
/ ==============================================*/
.push-start-button {
  width: 100%;
  color: rgba(255,255,255,.8);
  font-size: 22px;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: 3px 3px 1px rgba(0,0,0,.2);
  position: absolute;
  top: calc(50% - 15px);
  left: -5px;
  animation: pushStartAnime 700ms infinite alternate;
}
@keyframes pushStartAnime {
  0% { opacity: 1; }
  100% { opacity: .7; }
}
/* ============================================= /
/ [メッセージディスプレイ]
/ ==============================================*/
.message-display {
  width: 720px;
  height: 50px;
  padding: 0 15px;
  color: rgba(255,255,255,.85);
  font-size: 32px;
  letter-spacing: .1em;
  text-shadow: 4px 4px 2px rgba(0,0,0,.2);
  background: linear-gradient(0deg, rgba(255,255,255,.2), rgba(255,255,255,.1) 48%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.1));
  display: flex;
  align-items: center;
  /* justify-content: center; */
  position: absolute;
  top: 297px;
  left: calc(50% - 405px);
  box-shadow: 1px 1px 2px rgba(0,0,0,.9) inset, -1px -1px 1px rgba(255,255,255,.3) inset, 0 0 20px 5px rgba(255,255,255,.32) inset;
  box-sizing: border-box;
}
.message-display:before,
.message-display:after {
  content: '';
  display: block;
  position: absolute;
}
.message-display:before {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  background: linear-gradient(rgba(209,155,111,1)4%, rgb(226, 186, 153) 5%, rgba(209,155,111,1) 6%, rgba(115,78,48,1)10%, rgba(115,78,48,1) 40%, rgba(88,49,17,1) 60%, rgba(88,49,17,1) 91%, rgb(54, 30, 10) 94%, rgba(88,49,17,1));
  border-radius: 3px;
  top: -6px;
  left: -6px;
  z-index: -2;
  box-shadow: 0 2px 1px rgba(0,0,0,.45), 0 0 10px rgba(255,255,255,.2) inset;
}
.message-display:after {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18,96,0,1), rgba(19,113,0,1));
  top: 0;
  left: 0;
  z-index: -1;
}

/* [文字色分け] */
.message-text {
}
.message-text.player-win {
}
.message-text.player-lose {
}
.message-text.cpu-win {
}
.message-text.cpu-lose {
}
.message-text.draw {
}
/* ============================================= /
/ [カード置き場]
/ ==============================================*/
.card-holder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background: rgba(0,0,0,.1); */
}

/* ============================================= /
/ [カード置き場(プレイヤー)]
/ ==============================================*/
.card-holder.player {
}

/* ============================================= /
/ [カード置き場(CPU)]
/ ==============================================*/
.card-holder.cpu {
}
/* ============================================= /
/ [カードボーダー]設置位置
/ ==============================================*/
.card-pos-border {
  width: 100px;
  height: 153px;
  border: 6px solid rgba(255,255,255,.7);
  border-radius: 14px;
  box-sizing: border-box;
  position: absolute;
}
.card-pos-border.pos0 { left: calc(50% - 410px); }
.card-pos-border.pos1 { left: calc(50% - 305px); }
.card-pos-border.pos2 { left: calc(50% - 200px); }
.card-pos-border.pos3 { left: calc(50% - 95px); }
.card-pos-border.pos4 { left: calc(50% + 10px); }
.card-pos-border.pos5 { left: calc(50% + 115px); }
.card-pos-border.pos6 { left: calc(50% + 220px); }
/* [プレイヤー] */
.card-holder.player .card-pos-border {
  top: 376px;
}
/* [CPU] */
.card-holder.cpu .card-pos-border {
  top: 116px;
}


/* ============================================= /
/ [カード]
/ ==============================================*/
.card {
  width: 100px;
  position: absolute;
  cursor: default;
  transition: 100ms cubic-bezier(.37,1.19,.91,1.04);
}
.card .back,
.card .front {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 600ms;
  backface-visibility: hidden;
}
.card .front {
  transform: rotateY(-180deg);
}
.card.show .front {
  transform: rotateY(0);
}
.card.show .back {
  transform: rotateY(180deg);
}
.card img {
  width: 100%;
  vertical-align: bottom;
}

/* カード位置決め(共通) */
.card.pos0 { left: calc(50% - 410px); }
.card.pos1 { left: calc(50% - 305px); }
.card.pos2 { left: calc(50% - 200px); }
.card.pos3 { left: calc(50% - 95px); }
.card.pos4 { left: calc(50% + 10px); }
.card.pos5 { left: calc(50% + 115px); }
.card.pos6 { left: calc(50% + 220px); }

/* [プレイヤー] */
.card-holder.player .card {
  top: 376px;
}

/* [CPU] */
.card-holder.cpu .card {
  top: 116px;
}

/* カード配置前位置 */
.card-holder.player .card.startpos,
.card-holder.cpu .card.startpos {
  top: -250px;
  left: calc(50% - 115px);
}

/* ============================================= /
/ [合計値]
/ ==============================================*/
.total-num {
  width: 40px;
  height: 40px;
  color: #fff;
  font-family: 'Gugi', cursive;
  font-size: 26px;
  border-radius: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #3bc12b;
  border: 4px solid rgba(255,255,255,.7);
  box-shadow: 0 0 0 3px #3bc12b, 0 3px 6px rgba(0,0,0,.5);
  position: absolute;
  left: calc(50% - 480px);
}
.total-num.show {
  display: flex;
}
/* ============================================= /
/ [合計値(プレイヤー)]
/ ==============================================*/
.total-num.player {
  top: 427px;
}
/* ============================================= /
/ [合計値(CPU)]
/ ==============================================*/
.total-num.cpu {
  background: #952bc1;
  box-shadow: 0 0 0 3px #952bc1, 0 3px 6px rgba(0,0,0,.5);
  top: 120px;
}
/* ============================================= /
/ [エフェクト用キャンバス]
/ ==============================================*/
.canvas {
  margin: 0 auto;
}
/* ============================================= /
/ [ポイント(スコアディスプレイ)]※タイトルとゲーム中共通にするので状態でクラスを付与して位置を調整する
/ ==============================================*/
.point-display-container {
  width: 290px;
  height: 40px;
  position: absolute;
  top: calc(50% + 30px);
  left: calc(50% - 150px);
  z-index: 100;
}
.point-display-container.game {
  width: 250px;
  display: block;
  top: 575px;
  left: calc(50% + 12px);
}
.point-display-container.over {
  display: none;
}
.point-display-container:before,
.point-display-container:after {
  content: '';
  display: block;
  position: absolute;
}
.point-display-container:before {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  background: linear-gradient(rgba(209,155,111,1)4%, rgb(226, 186, 153) 5%, rgba(209,155,111,1) 6%, rgba(115,78,48,1)10%, rgba(115,78,48,1) 40%, rgba(88,49,17,1) 60%, rgba(88,49,17,1) 91%, rgb(54, 30, 10) 94%, rgba(88,49,17,1));
  border-radius: 3px;
  top: -6px;
  left: -6px;
  z-index: -2;
  box-shadow: 0 2px 1px rgba(0,0,0,.45), 0 0 10px rgba(255,255,255,.2) inset;
}
.point-display-container:after {
  width: 100%;
  height: 100%;
  background: #777e41;
  top: 0;
  left: 0;
  z-index: -1;
}

  .point-display-container .point-button {
    width: 40px;
    height: 40px;
    color: rgba(0,0,0,.4);
    text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 2px 5px 1px rgba(0,0,0,.1);
    background: #50b108;
    border: 4px solid rgba(115,78,48,1);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: 120ms;
    position: absolute;
    top: calc(50% - 27px);
  }
    .point-display-container .point-button .icon {
      font-size: 38px;
      position: relative;
    }
  .point-display-container .point-button:hover {
    color: rgba(0,0,0,.2);
    text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 1px 2px 1px rgba(0,0,0,.1);
    box-shadow: 0 0 20px #50b108;
  }
  .point-display-container .point-button:active {
    text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 0 0 rgba(255,255,255,.1);
    box-shadow: 0 0 2px #50b108;
  }
  .point-display-container .point-button:before {
    content: '';
    width: 150%;
    height: 30%;
    background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1));
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 1px;
    filter: blur(7px);
    transition: 120ms;
  }
  .point-display-container .point-button:hover:before {
  }
  .point-display-container .point-button:active:before {
    filter: blur(12px);
  }
  .point-display-container .point-button:after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    position: absolute;
    box-shadow: 0 -2px 8px 1px rgba(255,255,255,.4) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
    transition: 150ms;
  }
  .point-display-container .point-button:hover:after {
    box-shadow: 0 0 4px 1px rgba(255,255,255,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
  }
  
  .point-display-container .point-button:active:after {
    box-shadow: 0 -2px 4px 1px rgba(0,0,0,.2) inset, 1px 1px 1px 1px rgba(0,0,0,.7) inset, -1px -1px 1px 1px rgba(255,255,255,.2) inset;
  }

  /* [非活性] */
  .point-display-container .point-button.disabled,
  .point-display-container .point-button.disabled:hover,
  .point-display-container .point-button.disabled:active {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4), 1px 1px 1px rgba(0,0,0,.1);
    background: rgba(220,220,220,.8);
    box-shadow: none;
    cursor: default;
  }
  .point-display-container .point-button.disabled:before,
  .point-display-container .point-button.disabled:after {
    display: none;
  }

  .point-display-container .point-button.minus {
    right: calc(100% + 10px);
  }
  .point-display-container .point-button.plus {
    left: calc(100% + 10px);
  }
  /* [文字表示部] */
  .point-display-container .point-display {
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,.8);
    font-size: 18px;
    text-shadow: 3px 3px 2px rgba(0,0,0,.2);
    background: rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .point-display-container .point-display > span {
      width: 50%;
      padding: 5px 10px;
      box-sizing: border-box;
      position: relative;
    }
    .point-display-container .point-display > span:nth-of-type(1) {
    }
    .point-display-container .point-display > span:nth-of-type(1):before {
      content: 'sync_alt';
      font-family: 'Material Icons';
      position: absolute;
      font-size: 22px;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
    .point-display-container .point-display > span:nth-of-type(2) {
      text-align: right;
    }
      .point-display-container .point-display > span > span {
        margin-left: 5px;
        font-size: 24px;
        display: inline-block;
      }
/* ============================================= /
/ [クレジット]
/ ==============================================*/
.credit {
  width: 100%;
  padding: 10px;
  font-family: 'Sawarabi Mincho', serif;
  color: #fff;
  font-size: 10px;
  letter-spacing: .2em;
  text-align: right;
  background: rgba(0,0,0,.1);
  opacity: .8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
}
.credit.hide {
  display: none;
}
  .credit a {
    padding: 3px 10px;
    color: #fff;
    font-size: 11px;
    /* text-decoration: underline; */
    transition: 150ms;
    display: inline-block;
  }
  .credit a:hover {
    text-decoration: none;
    background: rgba(0,0,0,.1);
  }

/* ============================================= /
/ []
/ ==============================================*/