@charset "utf-8";

@media only screen and (max-width: 767px) {
  body {
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  body {
    text-align: center;
  }
}

html {
  //height: 100svh;
}

body {
  //height: 100svh;
  margin: 0;
  background: #333;
  color: #fff;
  font-size: 4svh;
  font-weight: bold;
}

a {
  color: #333;
  background-color: #fff;
  text-decoration: none;
}
a:hover {
  color: #fff;
  background: #00c;
}
a:active {
  color: #00c;
}

main {
  //background-color: pink;
}

button {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: x-large;
  font-weight: bold;
  cursor: pointer;
}

img {
  background-color: #fff;
  display: block;
  float: left;
  border: 0.5svh solid #fff;
  margin: 0.2svh;
}

.koma {
  position: absolute;
  width: 12svh;
  height: 12svh;
  font-size: 2svh;
  color: #fff;
  border-radius: 1svh;
  border: 0.5svh solid #fff;
  top: -1svh;
  left: 0svh;
  //transform: translate(-50%, -50%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

.karamasu {
  position: absolute;
  width: 12svh;
  height: 12svh;
  top: -2svh;
  left: 0svh;
  border: 0svh;
  background-color: rgba(255, 255, 255, 0);
}

.ni {
  transform: rotate(180deg);
}

.moti {
  transform: scale(0.5);
  transform-origin: top left;
}

.hiyoniwa {
  background: #060;
}

.kirizo {
  background: #639;
}

.raion {
  background: #c06;
}

.emoji {
  position: absolute;
  top: 2.5svh;
  left: 3.5svh;
  font-size: 3svh;
  font-weight: normal;
  width: 4svh;
  height: 4svh;
}

.moji {
  position: absolute;
  bottom: 2.25svh;
  left: 0svh;
  font-size: 2svh;
  width: 11svh;
}

.yj {
  position: absolute;
  font-size: 2svh;
}

.ue {
  top: 0svh;
  left: 4.5svh;
}

.sita {
  bottom: 0svh;
  left: 4.5svh;
  transform: rotate(180deg);
}

.migi {
  top: 4.5svh;
  right: 0svh;
  transform: rotate(90deg);
}

.hidari {
  top: 4.5svh;
  left: 0svh;
  transform: rotate(270deg);
}

.hokusei {
  top: 0svh;
  left: 0svh;
  transform: rotate(315deg);
}

.hokutou {
  top: 0svh;
  right: 0svh;
  transform: rotate(45deg);
}

.nansei {
  bottom: 0svh;
  left: 0svh;
  transform: rotate(225deg);
}

.nantou {
  bottom: 0svh;
  right: 0svh;
  transform: rotate(135deg);
}

#settei {
  z-index: 2;
  width: 100vw;
  height: 88svh;
  background-color: rgba(0, 0, 0, 0.5);

  position: absolute;
  top: 44svh;
  left: 50vw;
  transform: translate(-50%, -50%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

#kuronabi {
  //display: none;
  z-index: 1;
  width: 90vw;
  position: absolute;
  top: 43svh;
  left: 50vw;
  transform: translate(-50%, -50%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
  background-color: #333;
}

#nabi {
  display: none;
}

#skkt {
  display: none;
}

.masu {
  position: absolute;
  width: 12svh;
  height: 12svh;
  border: 0.5svh solid #fff;
  background-color: rgba(255, 255, 255, 0.5);
}

.motimasu {
  position: absolute;
  width: 6svh;
  height: 6svh;
  border: 0.5svh solid #fff;
  background-color: rgba(255, 255, 255, 0.5);
}

#masu00 {
  top: 0svh;
  left: 0svh;
}

#masu01 {
  top: 0svh;
  left: 13.5svh;
}

#masu02 {
  top: 0svh;
  left: 27svh;
}

#masu10 {
  top: 13.5svh;
  left: 0svh;
}

#masu11 {
  top: 13.5svh;
  left: 13.5svh;
}

#masu12 {
  top: 13.5svh;
  left: 27svh;
}

#masu20 {
  top: 27svh;
  left: 0svh;
}

#masu21 {
  top: 27svh;
  left: 13.5svh;
}

#masu22 {
  top: 27svh;
  left: 27svh;
}

#masu30 {
  top: 40.5svh;
  left: 0svh;
}

#masu31 {
  top: 40.5svh;
  left: 13.5svh;
}

#masu32 {
  top: 40.5svh;
  left: 27svh;
}

#onemoti1 {
  top: 0svh;
  left: 0svh;
}

#onemoti2 {
  top: 0svh;
  left: 7.5svh;
}

#onemoti3 {
  top: 0svh;
  left: 15svh;
}

#onemoti4 {
  top: 0svh;
  left: 22.5svh;
}

#onemoti5 {
  top: 0svh;
  left: 30svh;
}

#onemoti6 {
  top: 0svh;
  left: 37.5svh;
}

#twomoti1 {
  top: 0svh;
  left: 0svh;
}

#twomoti2 {
  top: 0svh;
  left: 7.5svh;
}

#twomoti3 {
  top: 0svh;
  left: 15svh;
}

#twomoti4 {
  top: 0svh;
  left: 22.5svh;
}

#twomoti5 {
  top: 0svh;
  left: 30svh;
}

#twomoti6 {
  top: 0svh;
  left: 37.5svh;
}

.gamen {
  z-index: 3;
  height: 87svh;
  //background-color: orange;
}

.tyousei {
  //background-color: yellow;
}

.outer {
  position: absolute;

  //padding-top: 1svh;
  width: 90vw;
  height: 69.5svh;
  top: 6svh;
  left: 50vw;
  background: linear-gradient(to bottom, #9cf, #cf9);
  transform: translate(-50%, 0%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);

  //transform: rotate( 180deg );
}

.motimasu1div {
  position: absolute;
  top: 62svh;
  left: 45vw;
  width: 44.5svh;
  height: 7svh;
  //background: black;
  transform: translate(-50%, 0%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

.motimasu2div {
  position: absolute;
  top: 0.5svh;
  left: 45vw;
  width: 44.5svh;
  height: 7svh;
  //background: red;
  transform: translate(-50%, 0%) rotate(180deg);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

.masuinner {
  position: absolute;
  top: 8svh;
  left: 45vw;
  width: 40svh;
  height: 53.5svh;
  //background: green;
  transform: translate(-50%, 0%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

#text {
  color: #fff;
  background-color: #333;
  margin: 0;
  position: absolute;
  top: 81.5svh;
  left: 50vw;
  width: 90vw;
  height: 5svh;
  transform: translate(-50%, 0%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
}

#player1 {
  position: absolute;
  top: 76svh;
  left: 50vw;
  width: 90vw;
  height: 5svh;
  transform: translate(-50%, 0%);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
  background: #333;
  margin: 0;
}

#player2 {
  position: absolute;
  top: 0.5svh;
  left: 50vw;
  width: 90vw;
  height: 5svh;
  transform: translate(-50%, 0%) rotate(180deg);
  //    -webkit-transform: translate(-50%, -50%);
  //    -ms-transform: translate(-50%, -50%);
  background: #333;
  margin: 0;
}

#rbotan {
  position: absolute;
  bottom: 0;
  z-index: 50;
  right: 0;
}