/**/
#title {
  background-image: url("../img/ui/pc-title.jpg");
  background-size: contain;
}

#game-10 {
  top: 24%;
  height: 6%;
  left: 25%;
}

#game-26 {
  top: 24%;
  height: 6%;
  left: 50%;
}

#game-40 {
  top: 24%;
  height: 6%;
  left: 75%;
}

@media screen and (max-width: 550px) {
  #title {
    background-image: url("../img/ui/sp-title.jpg");
  }
  #game-10 {
    top: 30%;
    height: 3%;
    left: 20%;
  }
  
  #game-26 {
    top: 30%;
    height: 3%;
    left: 50%;
  }
  
  #game-40 {
    top: 30%;
    height: 3%;
    left: 80%;
  }  
}

#hand2 {
  top: 0;
  left: 0;
  height: 20%;
  width: 100%;
}

#field {
  top: 20%;
  left: 0;
  height: 60%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

#field.field10 {
  left: 15%;
  width: 70%;
}

#field.field26 {
  left: 10%;
  width: 80%;
}

#result {
  height: 100%;
  width: 100%;
  display: none;
}

#hand1 {
  top: 80%;
  left: 0;
  height: 20%;
  width: 100%;
}

@media screen and (max-width: 550px) {
  #hand2 {
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 80;
    background-image: url(../img/ui/hand2.png);
    background-size: 100%;
  }
  
  #field {
    top: 15%;
    height: 70%;
    left: 0;
    width: 100%;
  }

  #field.field10,#field.field26,#field.field40 {
    left: 0;
    width: 100%;
  }

  /* #field.field42 {
    left: 0;
    width: 100%;
    overflow-y: scroll;
    align-content: baseline;
  } */

  #result {
    top: 0;
    left: 0;
    height: 100%;
  }
  
  #hand1 {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 80;
    background-image: url(../img/ui/hand1.png);
    background-size: 100%;
  }  
}

#cpu {
  top: 30%; left: 5%; height: 12%;
}

#mai2 {
  bottom: 23%; left: 20%; height: 15%;
}

#num2 {
  bottom: 20%; left: 13%; height: 25%;  
}

#iscpu {
  top: 14%; left: 2%; width: 26%; height:80%;
  object-fit: fill;
  display: none;
}

#me {
  top: 30%; right: 7%; height: 12%;
}

#mai1 {
  bottom: 23%; right: 10%; height: 15%;
}

#num1 {
  bottom: 20%; right: 16%; height: 25%;;  
}

#isplayer {
  top: 14%; right: 2%; width: 26%; height:80%;
  object-fit: fill;
  display: none;
}

.card {
  position: static;
  margin: 0.5%;
  height: auto;
  flex-shrink: 0; 
}

.blank {
  position: static;
  margin: 0.5%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}

.card.card10,.blank.card10 {
  width: auto;
  height: 49%;
}

.card.card26,.blank.card26 {
  width: 10%;
}

.card.card42,.blank.card42 {
  margin: 0.2%;
  width: 6.7%;
}


#hand2cards {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  top: 0; height: 100%; left: 30%; width: 70%;
}

#hand1cards {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  flex-direction: row-reverse;
  bottom: 0; height: 100%; right: 30%; width: 70%;
}

.num {
  position: static;
  height: 100%;
}

@media screen and (max-width: 550px) {
  #cpu {
    top: 25%; left: 4%; height: 10%;
  }
  
  #mai2 {
    top:60%; left: 25%; height: 16%;
  }

  #num2 {
    top: 50%; left: 12%; height: 25%;  
  }

  #iscpu {
    top: 12%; right: 2%; width: 33%; height:80%;
    object-fit: fill;
    display: none;
  }

  #me {
    bottom: 50%; right: 7%; height: 11%;
  }
  
  #mai1 {
    bottom: 20%; right: 10%; height: 16%;
  }
  
  #num1 {
    bottom: 20%; right: 20.5%; height: 25%; width: 10%;  
  }

  #isplayer {
    top: 14%; right: 2%; width: 33%; height:80%;
    object-fit: fill;
    display: none;
  }
    
  .card {
    width: 19%;
  }
  
  .blank {
    width: 19%;
  }  

  .card.card10,.blank.card10 {
    width: 19%;
    height: auto;
  }
  
  .card.card26,.blank.card26 {
    width: 15%;
    height: auto;
  }
  
  .card.card42,.blank.card42 {
    width: 13.5%;
    height: auto;
  }
  #hand2cards {
    left: 38%; width: 62%;
  }
  
  #hand1cards {
    right: 38%; width: 62%;
  }
}

.result {
  top: 6%; height: 8%; display: none;
}

#cpures {
  top: 25%; height: 3%; left: 3%;
}

#num2res {
  top: 22%; height: 8%; left: 35%;
}

#mai2res {
  top:25%; height: 3%; left: 40%;
}

#meres {
  top: 25%; height: 3%; left: 55%;
}

#num1res {
  top: 22%; height: 10%; left: 84%;
}

#mai1res {
  top: 25%; height: 3%; left: 92%;
}

#continue {
  bottom: 10%; width: 15%; right: 23%;
}

#tweet {
  bottom: 10%; width: 15%; right: 5%;
}

.cardres {
  position: static;
  margin: 0.5%;
  height: 100%;
  width: 20%;
  overflow: visible;
}

.cardres > img {
  height: 100%;
}

#hand2res {
  top: 45%; height: 20%; width: 43%; left: 4%; right: auto;
  flex-direction: row-reverse;
}  
#hand1res {
  top: 45%; height: 20%; width: 43%; left: 53%; right: auto;
  flex-direction: row-reverse;
}

#dot2res {
  top:17%; height: 60%; left: 1%; width:48%;
  object-fit: fill;
}

#dot1res {
  top:17%; height: 60%; left: 51%; width:48%;
  object-fit: fill;
}

#dot2resSp {
  display: none;
}

#dot1resSp {
  display: none;
}

@media screen and (max-width: 550px) {
  .result {
    height: auto; width: 80%; top: 5%;
  }

  #cpures {
    top: 48%; height: auto; right: auto; left:15%; width: 40%;
  }
  
  #meres {
    top: 18%; height: auto; right: auto; left:25%; width: 30%;
  }
  
  #num2res {
    top: 47%; right: auto; left: 64%; height: 4%; width: 10%;
  }
  
  #mai2res {
    top: 48%; right: auto; left: 70%; height: 3%;
  }
  
  #num1res {
    top: 17%; right: auto; left: 64%; height: 4%; width: 10%;
  }
  
  #mai1res {
    top: 18%; right: auto; left: 70%; height: 3%;
  }
  
  #continue {
    bottom: 10%; width: 40%; right: auto; left: 5%;
  }
  
  #tweet {
    bottom: 10%; width: 40%; right: 5%;
  }  

  #hand2res {
    top: 57%; height: 15%; width: 80%; left: 5%;
    flex-direction: row-reverse;
    overflow: visible;
  }  
  #hand1res {
    top: 26%; height: 15%; width: 80%; left: 5%;
    flex-direction: row-reverse;
    overflow: visible;
  }  
  #dot2res {
    display: none;
  }
  
  #dot1res {
    display: none;
  }

  #dot2resSp {
    display: none;
  }
  
  #dot1resSp {
    top: 15%; height: 8%; width: 90%; left: 5%;
    object-fit: fill;
    display: block;
  }

  #dot2resSp {
    top: 45%; height: 8%; width: 90%; left: 5%;
    object-fit: fill;
    display: block;
  }
}


#fieldLoader {
  width: 100%;
  height: 100%;
}

#l1 {
  top: 20%;
  left: 10%;
  height: 20%;
  opacity: 0;
  animation: 8s blink-anim 2s infinite ease-out forwards;
}

#l2 {
  top: 40%;
  left: 30%;
  height: 20%;
  opacity: 0;
  animation: 6s blink-anim 3s infinite ease-out forwards;
}

#l3 {
  top: 20%;
  left: 50%;
  height: 20%;
  opacity: 0;
  animation: 7s blink-anim 5s infinite ease-out forwards;
}

#l4 {
  top: 60%;
  left: 65%;
  height: 20%;
  opacity: 0;
  animation: 10s blink-anim 2s infinite ease-out forwards;
}

#l5 {
  top: 30%;
  left: 80%;
  height: 20%;
  opacity: 0;
  animation: 7s blink-anim 1s infinite ease-out forwards;
}

@media screen and (max-width: 550px) {
  #l5 {
    top: 70%;
    left: 20%;
    height: 20%;
    opacity: 0;
    animation: 7s blink-anim 1s infinite ease-out forwards;
  }
}

body {
    background-image: url("../img/ui/back-pc.jpg");
    background-size: cover;
    background-color: #362517;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none;
    text-align: center;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

div,img {
    position: absolute;
    overflow: hidden;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

img {
    object-fit: contain;
}


.selected {
  filter: brightness(150%);
}

.highlight {
  filter: brightness(150%);
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
.translate-center{
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
.horizontal-center{
  left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);
}
.translate-horizontal-center{
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.translate-horizontal-center-right{
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
}

.text-center {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
}


.text-center {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
}

.button:hover {
  filter: brightness(150%);
}

@keyframes blink-anim {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.scale{
  animation: scale-anim 0.5s ease-out forwards;
}

@keyframes scale-anim {
	100% {
		transform: scale(1.2);
	}
}


.fadeout{
  animation: fadeout-anim 1s linear forwards;
}

@keyframes fadeout-anim {
	100% {
		opacity: 0;
	}
}

.fadein{
  animation: fadein-anim 2s linear forwards;
}

@keyframes fadein-anim {
	100% {
		opacity: 1;
	}
}

.open1{
  animation: open1-anim 0.4s linear forwards;
}

@keyframes open1-anim {
	100% {
		transform: rotateY(90deg);
	}
}

.open2{
  animation: open2-anim 0.4s linear forwards;
}

@keyframes open2-anim {
  0% {
		transform: rotateY(-90deg);
  }
	100% {
		transform: rotateY(0deg);
	}
}

.loader,
.loader:before,
.loader:after {
  background: #00ffe1;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
  overflow: visible;
}
.loader {
  color: #00ffe1;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  z-index: 9999;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}