@charset "UTF-8";
.modalWin {
  display: none;
}

.modalLose {
  display: none;
}

.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #f4f4f4;
  margin: 10% auto;
  -webkit-box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
          box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  -webkit-animation-name: modalopen;
          animation-name: modalopen;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-header h2 {
  margin: 1rem 0;
}

.modal-header {
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.modalClose {
  display: block;
  text-align: right;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 2rem;
}

.modalClose:hover {
  cursor: pointer;
}

.modal-body {
  padding: 10px 20px;
  color: black;
}

.modal-body img {
  width: 100%;
  margin-bottom: 20px;
}

label {
  display: block;
}

.div-none {
  display: none;
}

#coinBorder {
  width: 150px;
  padding: 6px 20px;
  margin: 10px 0px;
  color: gray;
  border-radius: 5px;
  border: solid 1px gray;
}

@media screen and (min-width: 720px) {
  .container {
    width: 720px;
    margin-top: 20px;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 160px 206px;
        grid-template-rows: 1fr 160px 206px;
    -ms-grid-columns: 430px 50px 1fr;
        grid-template-columns: 430px 50px 1fr;
  }
  .container #selectAction {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / 4;
  }
  .container #openCardsArea {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .container #handCardsArea {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
  }
  .container #board {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    grid-row: 3 / 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }
  .container #actionCardContainer {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / 4;
  }
  .container #twoDeck {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / 5;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / 4;
  }
  .container #ruleLink {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / 4;
  }
  .container .modal-content {
    width: 500px;
  }
}

@media screen and (max-width: 769px) {
  .container {
    width: 500px;
    margin-top: 20px;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 160px 180px 400px 160px;
        grid-template-rows: 1fr 160px 180px 400px 160px;
    -ms-grid-columns: 234px 1fr;
        grid-template-columns: 234px 1fr;
  }
  .container #selectAction {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .container #openCardsArea {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .container #handCardsArea {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
  }
  .container #board {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .container #actionCardContainer {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
  .container #twoDeck {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
  .container #ruleLink {
    -ms-grid-row: 6;
    -ms-grid-row-span: 1;
    grid-row: 6 / 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
    position: relative;
    top: 60px;
  }
  .container .modal-content {
    width: 350px;
  }
}

#openCardsArea .cardwidth, #handCardsArea .cardwidth {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 149px;
}

#openCardsArea .spaceX, #handCardsArea .spaceX {
  position: absolute;
  left: 100px;
  bottom: 66px;
}

#openCardsArea #leftingredientArea, #openCardsArea #rightingredientArea, #handCardsArea #leftingredientArea, #handCardsArea #rightingredientArea {
  margin-right: 26px;
}

#playerBoard, #comBoard {
  display: inline-block;
  position: relative;
  height: 414px;
}

#playerBoard #playerBoardElixir, #playerBoard #comBoardElixir, #comBoard #playerBoardElixir, #comBoard #comBoardElixir {
  display: block;
  position: absolute;
}

#playerBoard .box, #comBoard .box {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 1px solid black;
}

#playerBoard .box#playerBoardBlue, #comBoard .box#playerBoardBlue {
  background-color: blue;
  left: 166px;
}

#playerBoard .box#playerBoardGreen, #comBoard .box#playerBoardGreen {
  background-color: green;
  left: 134px;
}

#playerBoard .box#playerBoardYellow, #comBoard .box#playerBoardYellow {
  background-color: yellow;
  left: 100px;
}

#playerBoard .box#playerBoardRed, #comBoard .box#playerBoardRed {
  background-color: red;
  left: 66px;
}

#playerBoard .box#comBoardBlue, #comBoard .box#comBoardBlue {
  background-color: blue;
  left: 166px;
}

#playerBoard .box#comBoardGreen, #comBoard .box#comBoardGreen {
  background-color: green;
  left: 134px;
}

#playerBoard .box#comBoardYellow, #comBoard .box#comBoardYellow {
  background-color: yellow;
  left: 100px;
}

#playerBoard .box#comBoardRed, #comBoard .box#comBoardRed {
  background-color: red;
  left: 66px;
}

#actionCard {
  position: relative;
}

#actionCard #actionSunCard {
  position: absolute;
}

#actionCard #actionMoonCard {
  position: static;
}

.deck {
  display: inline-block;
  position: relative;
}

.deck .cardA {
  position: absolute;
}

.deck .cardB {
  position: absolute;
}

.deck .cardC {
  position: absolute;
}

.deck .cardD {
  position: absolute;
}

.deck .cardE {
  position: absolute;
}

.deck .cardF {
  position: static;
}

#blackDeck {
  left: 36px;
}

/***********************************************
  アニメーション
************************************************/
.drawAnimation {
  position: absolute;
  -webkit-animation: drawAnime forwards 0.2s ease-out;
          animation: drawAnime forwards 0.2s ease-out;
}

@-webkit-keyframes drawAnime {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes drawAnime {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}

.moveAnimation {
  -webkit-animation: moveAnime forwards 0.2s ease-in;
          animation: moveAnime forwards 0.2s ease-in;
}

@-webkit-keyframes moveAnime {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 0;
  }
}

@keyframes moveAnime {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 0;
  }
}

.faceUp_in {
  position: absolute;
  -webkit-animation: faceUp_in forwards 0.4s ease;
          animation: faceUp_in forwards 0.4s ease;
}

@-webkit-keyframes faceUp_in {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes faceUp_in {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

.faceUp_out {
  position: absolute;
  -webkit-animation: faceUp_out forwards 0.4s ease;
          animation: faceUp_out forwards 0.4s ease;
}

@-webkit-keyframes faceUp_out {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

@keyframes faceUp_out {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

.activeSun {
  position: absolute;
  -webkit-animation: activeSun forwards 0.4s ease;
          animation: activeSun forwards 0.4s ease;
}

@-webkit-keyframes activeSun {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes activeSun {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

.hideSun {
  position: absolute;
  -webkit-animation: hideSun forwards 0.4s ease;
          animation: hideSun forwards 0.4s ease;
}

@-webkit-keyframes hideSun {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

@keyframes hideSun {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

.activeMoon {
  position: absolute;
  -webkit-animation: activeMoon forwards 0.4s ease;
          animation: activeMoon forwards 0.4s ease;
}

@-webkit-keyframes activeMoon {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes activeMoon {
  0% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
}

.hideMoon {
  position: absolute;
  -webkit-animation: hideMoon forwards 0.4s ease;
          animation: hideMoon forwards 0.4s ease;
}

@-webkit-keyframes hideMoon {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

@keyframes hideMoon {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    opacity: 0;
  }
}

.shuffleDeckA {
  -webkit-animation: shuffleA forwards 0.2s linear;
          animation: shuffleA forwards 0.2s linear;
}

@-webkit-keyframes shuffleA {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 10;
  }
}

@keyframes shuffleA {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 10;
  }
}

.shuffleDeckB {
  -webkit-animation: shuffleB forwards 0.2s 0.1s linear;
          animation: shuffleB forwards 0.2s 0.1s linear;
}

@-webkit-keyframes shuffleB {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 20;
  }
}

@keyframes shuffleB {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 20;
  }
}

.shuffleDeckC {
  -webkit-animation: shuffleC forwards 0.2s 0.2s linear;
          animation: shuffleC forwards 0.2s 0.2s linear;
}

@-webkit-keyframes shuffleC {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 30;
  }
}

@keyframes shuffleC {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 30;
  }
}

.shuffleDeckD {
  -webkit-animation: shuffleD forwards 0.2s 0.3s linear;
          animation: shuffleD forwards 0.2s 0.3s linear;
}

@-webkit-keyframes shuffleD {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 40;
  }
}

@keyframes shuffleD {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 40;
  }
}

.shuffleDeckE {
  -webkit-animation: shuffleE forwards 0.2s 0.4s linear;
          animation: shuffleE forwards 0.2s 0.4s linear;
}

@-webkit-keyframes shuffleE {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 50;
  }
}

@keyframes shuffleE {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 50;
  }
}
/*# sourceMappingURL=main.css.map */