@charset "UTF-8";
/* ------------------------------------------------------------
/* mixin
 * ------------------------------------------------------------ */
/* ------------------------------------------------------------
 * リセット
 * ------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
}

*, :before, :after {
  box-sizing: border-box;
}

li {
  list-style: none;
}

html {
  overflow-y: scroll;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Kosugi Maru', sans-serif;
}

button,
select {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@font-face {
  font-family: 'icons';
  src: url("https://taqumo.me/game/concentration/font/fontello.woff2") format("woff2"), url("https://taqumo.me/game/concentration/font/fontello.woff") format("woff");
  font-display: block;
}
/* ------------------------------------------------------------
 * 大枠
 * ------------------------------------------------------------ */
.concentration {
  height: 100%;
}

/* ------------------------------------------------------------
 * 共通ボタン
 * ------------------------------------------------------------ */
.btn {
  padding: .25em 1em;
  font-family: 'VT323', monospace;
  line-height: 1;
  text-align: center;
  border: 3px solid #000;
  border-radius: 1em;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------
 * 表紙
 * ------------------------------------------------------------ */
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  background: url(https://taqumo.me/game/concentration/img/bg_cover.png) no-repeat 50% 0;
  background-size: 1500px auto;
}
.is-play .cover {
  display: none;
}

.cover_title {
  display: flex;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 3px #000;
  font-size: 8rem;
}
@media (max-width: 600px) {
  .cover_title {
    font-size: calc( 4rem + 64 * ((100vw - 320px) / 280) );
  }
}
@media (max-width: 320px) {
  .cover_title {
    font-size: 4rem;
  }
}
.cover_title span {
  display: inline-block;
  width: 148px;
  padding: .3em 0;
  background-image: url(https://taqumo.me/game/concentration/img/bg_cards.png);
  background-repeat: no-repeat;
  background-size: 1300% auto;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
}
.cover_title span:nth-of-type(odd) {
  background-position: 0 100%;
  border-color: #006b84;
}
.cover_title span:nth-of-type(even) {
  background-position: 8.333% 100%;
  border-color: #d82340;
}
.cover_title span:nth-of-type(1) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.cover_title span:nth-of-type(3) {
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
}
.cover_title span:nth-of-type(4) {
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
}

.coverNumber {
  font-size: 2.5rem;
}
@media (max-width: 600px) {
  .coverNumber {
    font-size: calc( 1.625rem + 14 * ((100vw - 320px) / 280) );
  }
}
@media (max-width: 320px) {
  .coverNumber {
    font-size: 1.625rem;
  }
}

.coverNumber_heading {
  margin-top: 50px;
  font-weight: bold;
}

.coverNumber_body {
  position: relative;
  display: inline-block;
  width: 4em;
  padding: .2em 0 .2em 1em;
  margin-top: 20px;
  overflow: hidden;
  border: 2px solid;
  border-radius: 1em;
  background-color: #fff;
}
.coverNumber_body::before {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 100%;
  font-family: 'icons';
  pointer-events: none;
  content: '\e804';
  background-color: #fff;
}
.coverNumber_body select {
  width: 100%;
}

.cover_btnStart {
  margin-top: 30px;
  color: #ed7bf4;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-animation: blinkText .4s 1s infinite;
          animation: blinkText .4s 1s infinite;
  font-size: 3.75rem;
}
@media (max-width: 600px) {
  .cover_btnStart {
    font-size: calc( 2.25rem + 24 * ((100vw - 320px) / 280) );
  }
}
@media (max-width: 320px) {
  .cover_btnStart {
    font-size: 2.25rem;
  }
}
.cover_btnStart:hover {
  -webkit-animation: blinkText .4s 1s infinite, boyoooon .8s;
          animation: blinkText .4s 1s infinite, boyoooon .8s;
}

@media (max-width: 600px) {
  .cover {
    background-size: 250% auto;
  }

  .cover_title {
    display: block;
  }
  .cover_title span {
    width: 26vw;
    padding: 7.5vw 0;
  }

  .cover_btnStart {
    width: 80%;
  }
}
/* ------------------------------------------------------------
 * ステージ
 * ------------------------------------------------------------ */
.stage {
  position: relative;
  display: none;
  height: 100%;
  font-family: 'VT323', monospace;
  line-height: 1;
  font-size: 4rem;
}
@media (max-width: 600px) {
  .stage {
    font-size: calc( 2.5rem + 24 * ((100vw - 320px) / 280) );
  }
}
@media (max-width: 320px) {
  .stage {
    font-size: 2.5rem;
  }
}
.is-play .stage {
  display: block;
}

/* オーバーレイ
 * -------------------------------------------------- */
.stage_overlay {
  position: fixed;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.is-countdown .stage_overlay {
  display: flex;
}
.is-pause .stage_overlay {
  display: block;
  cursor: pointer;
}
.is-pause .stage_overlay::before, .is-pause .stage_overlay::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 10vh;
  -webkit-animation: bounceIn .5s;
          animation: bounceIn .5s;
}
.is-pause .stage_overlay::before {
  width: 2em;
  height: 2em;
  content: '';
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}
.is-pause .stage_overlay::after {
  width: .5em;
  height: 1em;
  font-family: 'icons';
  color: #fff;
  content: '\e801';
}
.is-finish .stage_overlay {
  display: block;
}

/* カウントダウン
 * -------------------------------------------------- */
.stage_countDown {
  display: none;
  color: #ed7bf4;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
  -webkit-animation: showCountNumber 1s infinite;
          animation: showCountNumber 1s infinite;
  font-size: 21.875rem;
}
@media (max-width: 600px) {
  .stage_countDown {
    font-size: calc( 10.625rem + 180 * ((100vw - 320px) / 280) );
  }
}
@media (max-width: 320px) {
  .stage_countDown {
    font-size: 10.625rem;
  }
}
.stage_countDown.is-2 {
  color: #99fafd;
}
.stage_countDown.is-1 {
  color: #fae569;
}
.stage_countDown.is-go {
  color: #86fb73;
}
.is-countdown .stage_countDown {
  display: block;
}

/* タイマー
 * -------------------------------------------------- */
.stage_timer {
  position: fixed;
  top: 10px;
  left: 15px;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.is-finish .stage_timer {
  top: 50%;
  left: 50%;
  font-size: 28vw;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: blinkText .4s .5s linear infinite forwards;
          animation: blinkText .4s .5s linear infinite forwards;
}

/* カード枚数
 * -------------------------------------------------- */
.stage_number {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 1;
}

/* カード
 * -------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: calc(1em + 20px) 15px calc(1.5em + 20px);
  gap: 15px;
}

.cards_item {
  position: relative;
  padding-top: 140%;
  cursor: pointer;
  border-radius: 10px;
  transition: box-shadow .2s ease-out, -webkit-transform .2s ease-out;
  transition: box-shadow .2s ease-out, transform .2s ease-out;
  transition: box-shadow .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out;
}
.cards_item::before, .cards_item::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 2px);
  overflow: hidden;
  content: '';
  background-image: url(https://taqumo.me/game/concentration/img/bg_cards.png);
  background-repeat: no-repeat;
  background-size: 1300% auto;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cards_item::before {
  background-color: #f9faf8;
  border-color: #000;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.cards_item:nth-child(odd)::after {
  background-position: 0 100%;
  border-color: #006b84;
}
.cards_item:nth-child(even)::after {
  background-position: 8.333% 100%;
  border-color: #d82340;
}
.cards_item.is-open {
  pointer-events: none;
}
.cards_item.is-open::before {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}
.cards_item.is-open::after {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.cards_item.is-hide {
  visibility: hidden;
}
.cards_item:hover {
  box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.3);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.cards_item[data-mark='club'][data-num='1']::before {
  background-position: 0% 0%;
}
.cards_item[data-mark='club'][data-num='2']::before {
  background-position: 8.333% 0%;
}
.cards_item[data-mark='club'][data-num='3']::before {
  background-position: 16.666% 0%;
}
.cards_item[data-mark='club'][data-num='4']::before {
  background-position: 24.999% 0%;
}
.cards_item[data-mark='club'][data-num='5']::before {
  background-position: 33.332% 0%;
}
.cards_item[data-mark='club'][data-num='6']::before {
  background-position: 41.665% 0%;
}
.cards_item[data-mark='club'][data-num='7']::before {
  background-position: 49.998% 0%;
}
.cards_item[data-mark='club'][data-num='8']::before {
  background-position: 58.331% 0%;
}
.cards_item[data-mark='club'][data-num='9']::before {
  background-position: 66.664% 0%;
}
.cards_item[data-mark='club'][data-num='10']::before {
  background-position: 74.997% 0%;
}
.cards_item[data-mark='club'][data-num='11']::before {
  background-position: 83.33% 0%;
}
.cards_item[data-mark='club'][data-num='12']::before {
  background-position: 91.663% 0%;
}
.cards_item[data-mark='club'][data-num='13']::before {
  background-position: 99.996% 0%;
}
.cards_item[data-mark='diamond'][data-num='1']::before {
  background-position: 0% 25%;
}
.cards_item[data-mark='diamond'][data-num='2']::before {
  background-position: 8.333% 25%;
}
.cards_item[data-mark='diamond'][data-num='3']::before {
  background-position: 16.666% 25%;
}
.cards_item[data-mark='diamond'][data-num='4']::before {
  background-position: 24.999% 25%;
}
.cards_item[data-mark='diamond'][data-num='5']::before {
  background-position: 33.332% 25%;
}
.cards_item[data-mark='diamond'][data-num='6']::before {
  background-position: 41.665% 25%;
}
.cards_item[data-mark='diamond'][data-num='7']::before {
  background-position: 49.998% 25%;
}
.cards_item[data-mark='diamond'][data-num='8']::before {
  background-position: 58.331% 25%;
}
.cards_item[data-mark='diamond'][data-num='9']::before {
  background-position: 66.664% 25%;
}
.cards_item[data-mark='diamond'][data-num='10']::before {
  background-position: 74.997% 25%;
}
.cards_item[data-mark='diamond'][data-num='11']::before {
  background-position: 83.33% 25%;
}
.cards_item[data-mark='diamond'][data-num='12']::before {
  background-position: 91.663% 25%;
}
.cards_item[data-mark='diamond'][data-num='13']::before {
  background-position: 99.996% 25%;
}
.cards_item[data-mark='heart'][data-num='1']::before {
  background-position: 0% 50%;
}
.cards_item[data-mark='heart'][data-num='2']::before {
  background-position: 8.333% 50%;
}
.cards_item[data-mark='heart'][data-num='3']::before {
  background-position: 16.666% 50%;
}
.cards_item[data-mark='heart'][data-num='4']::before {
  background-position: 24.999% 50%;
}
.cards_item[data-mark='heart'][data-num='5']::before {
  background-position: 33.332% 50%;
}
.cards_item[data-mark='heart'][data-num='6']::before {
  background-position: 41.665% 50%;
}
.cards_item[data-mark='heart'][data-num='7']::before {
  background-position: 49.998% 50%;
}
.cards_item[data-mark='heart'][data-num='8']::before {
  background-position: 58.331% 50%;
}
.cards_item[data-mark='heart'][data-num='9']::before {
  background-position: 66.664% 50%;
}
.cards_item[data-mark='heart'][data-num='10']::before {
  background-position: 74.997% 50%;
}
.cards_item[data-mark='heart'][data-num='11']::before {
  background-position: 83.33% 50%;
}
.cards_item[data-mark='heart'][data-num='12']::before {
  background-position: 91.663% 50%;
}
.cards_item[data-mark='heart'][data-num='13']::before {
  background-position: 99.996% 50%;
}
.cards_item[data-mark='spade'][data-num='1']::before {
  background-position: 0% 75%;
}
.cards_item[data-mark='spade'][data-num='2']::before {
  background-position: 8.333% 75%;
}
.cards_item[data-mark='spade'][data-num='3']::before {
  background-position: 16.666% 75%;
}
.cards_item[data-mark='spade'][data-num='4']::before {
  background-position: 24.999% 75%;
}
.cards_item[data-mark='spade'][data-num='5']::before {
  background-position: 33.332% 75%;
}
.cards_item[data-mark='spade'][data-num='6']::before {
  background-position: 41.665% 75%;
}
.cards_item[data-mark='spade'][data-num='7']::before {
  background-position: 49.998% 75%;
}
.cards_item[data-mark='spade'][data-num='8']::before {
  background-position: 58.331% 75%;
}
.cards_item[data-mark='spade'][data-num='9']::before {
  background-position: 66.664% 75%;
}
.cards_item[data-mark='spade'][data-num='10']::before {
  background-position: 74.997% 75%;
}
.cards_item[data-mark='spade'][data-num='11']::before {
  background-position: 83.33% 75%;
}
.cards_item[data-mark='spade'][data-num='12']::before {
  background-position: 91.663% 75%;
}
.cards_item[data-mark='spade'][data-num='13']::before {
  background-position: 99.996% 75%;
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
    padding-right: 2.5vw;
    padding-left: 2.5vw;
    gap: 2.5vw;
  }
}
/* ボタン
 * -------------------------------------------------- */
.stageBtns {
  position: fixed;
  bottom: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.stageBtns_item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
  font-size: .7em;
  transition: background-color 2s;
}
.stageBtns_item::before {
  margin-right: .3em;
  font-family: 'icons';
  font-size: .7em;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.stageBtns_item.is-back::before {
  content: '\e800';
}
.stageBtns_item.is-pause::before {
  content: '\e802';
}
.stageBtns_item.is-restart::before {
  content: '\e803';
}
.stageBtns_item:hover {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  -webkit-animation: blinkText .4s infinite;
          animation: blinkText .4s infinite;
}

.is-finish .stageBtns {
  z-index: 1;
}
.is-finish .stageBtns_item.is-back, .is-finish .stageBtns_item.is-restart {
  background-color: #fff;
}
.is-finish .stageBtns_item.is-stop {
  pointer-events: none;
}

@media (max-width: 600px) {
  .stageBtns {
    justify-content: space-between;
    padding: 0 2.5vw;
  }

  .stageBtns_item {
    width: calc((100% - 5vw) / 3);
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
  }
  .stageBtns_item span {
    display: none;
  }
}
/* アニメーション
 * -------------------------------------------------- */
@-webkit-keyframes blinkText {
  0% {
    color: #ed7bf4;
  }
  50% {
    color: #99fafd;
  }
  75% {
    color: #fae569;
  }
  100% {
    color: #86fb73;
  }
}
@keyframes blinkText {
  0% {
    color: #ed7bf4;
  }
  50% {
    color: #99fafd;
  }
  75% {
    color: #fae569;
  }
  100% {
    color: #86fb73;
  }
}
@-webkit-keyframes boyoooon {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  30% {
    -webkit-transform: scale(1.3, 0.8);
            transform: scale(1.3, 0.8);
  }
  40% {
    -webkit-transform: scale(1.3, 0.8);
            transform: scale(1.3, 0.8);
  }
  50% {
    -webkit-transform: scale(0.95, 1.08);
            transform: scale(0.95, 1.08);
  }
  60% {
    -webkit-transform: scale(1.15, 0.9);
            transform: scale(1.15, 0.9);
  }
  70% {
    -webkit-transform: scale(0.98, 1.02);
            transform: scale(0.98, 1.02);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes boyoooon {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  30% {
    -webkit-transform: scale(1.3, 0.8);
            transform: scale(1.3, 0.8);
  }
  40% {
    -webkit-transform: scale(1.3, 0.8);
            transform: scale(1.3, 0.8);
  }
  50% {
    -webkit-transform: scale(0.95, 1.08);
            transform: scale(0.95, 1.08);
  }
  60% {
    -webkit-transform: scale(1.15, 0.9);
            transform: scale(1.15, 0.9);
  }
  70% {
    -webkit-transform: scale(0.98, 1.02);
            transform: scale(0.98, 1.02);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes showCountNumber {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes showCountNumber {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}