h2 {
  text-align:center;
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
  margin-top:0.5em;
  margin-bottom:1.2em;
 
	font-family: 'Chango', cursive;
  font-size:26px;
}

hr {
  background-color: #fff;
  border-top: 2px dotted #bbb;
}

.turn-msg1 {
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: #f00;
}

.turn-msg1:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #f00 transparent transparent transparent;
}

.turn-msg2 {
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: #00f;
}

.turn-msg2:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #00f transparent transparent transparent;
}

.result-msg1 {
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: rgb(255, 0, 255);
  border:5px solid #aa0;
}

.result-msg1:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: rgb(255,0,255) transparent transparent transparent;
}

.result-msg2 {
  position: relative;
  padding: 1.5rem 2rem;
  color: blue;
  border-radius: 10px;
  background: rgb(0, 195, 255);
  border:5px solid #aa0;
}

.result-msg2:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: rgb(0,195,255) transparent transparent transparent;
}

.turn-msg3 {
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 10px;
  background: #099;
}

.turn-msg3:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #099 transparent transparent transparent;
}

.btn-circle {
  width: 22px;
  height: 22px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.btn-rect {
  width: 22px;
  height: 22px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
}
.btn-rect.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
}
.btn-rect.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
}

@media screen and (min-width: 480px){
  .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
  }

  .btn-rect {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
  }
  
}

.btn0-color {
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.team1-color {
  filter: drop-shadow(0 0px 3px rgba(255, 0, 0, .9));
}

.team2-color {
  filter: drop-shadow(0 0px 3px rgba(0, 0, 255, .9));
}

#r1, #r2, #r3 {
	margin-top:1em;
	margin-bottom:1em;
	text-align:center;
}

#btn0, #btn1, #btn2, #btn3, #btn4, #btn5,#btn6,#btn7, #btn8,#btn9, #btn10,#btn11,#btn12, #btn13, #btn14 {
	margin: 0.1em;
}

#btn-Retry, #btn-OK, #btn-End {
  margin:0 auto;
  margin-bottom:2em;
  font-size:16pt;
  width:100%;
}

#turn-msg-area {
  text-align:center;
  margin-bottom:1em;
}

#left-msg-area {
  text-align:center;
  margin-bottom:3em;
}

#l2eft-msg {
  background-color:#a54506;
  border-radius:10px;
  padding:1em;
  margin:0 auto;
  color:white;
  font-weight: 900;
  font-size:16pt;
}

#left-msg {
  position: relative;
  padding: 1.5rem 2.5rem;
  border: 4px solid #000;
}

#left-msg:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 4px dotted #000;
}

#game-area {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3;/*文字色*/
  border: solid 5px #a54506;/*線*/
  border-radius: 10px;/*角の丸み*/
/*  background-color:#007728;
*/  background-image: linear-gradient(135deg, #00a228 0%, #005511 100%);
}
.game-area p {
  margin: 0; 
  padding: 0;
}

.ui-dialog-titlebar {
  color: #ffffff;
  background: green;
}