@CHARSET "windows-31j";

@font-face {
  font-family: 'NotoSansJP';
  src: url('../res/PlemolJPHS-Text.ttf') format('truetype');
}

* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
}

body {
  font-family: 'NotoSansJP', Arial, sans-serif;
  margin: 0px;
  padding-top: 0px;
  background-color: #000;
  /*
	background-image: none;
	background-repeat: no-repeat;
	background-position-x: left;
	background-position-y: top;
  background-attachment: fixed;
  */
	color: #f8f9fa;
}

a {
  color:aqua;
}

#game-canvas {
  outline: none;
}

#game-area {
    position: fixed;
    z-index: 0;
    top: 0;
    left:0;
    right: 0;
    bottom:0;
    overflow: hidden;
}

#payment-area {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    visibility: hidden;
}

#payment-frame {
    position: relative;
    background-color: rgb(3, 1, 24);
    overflow: hidden;
    margin: 24px;
    padding: 48px;
  border-width: 1px;
  border-style: solid;
  border-color: #e6b208;
}

.room-title {
  padding: 8px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  border-width: 2px;
  border-style: solid;
  border-top-color: #100C32;
  border-left-color: #100C32;
  border-right-color: #77739D;
  border-bottom-color: #77739D;
}

.msg-text {
  z-index: 2;
  padding: 6px;
  resize: none;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
  border-width: 2px;
  border-style: solid;
  border-color: #77739D;
}

.user-profile {
  padding: 0;
  margin: 0;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.25);
  border: none;
}

.news-area {
  z-index: 2;
  padding: 0px;
  resize: none;
  color: #ffffffdd;
  background: none;
  background-color: rgba(0, 0, 0, 0.0);
  /*
  border-width: 2px;
  border-style: solid;
  border-color: #77739D;
  */
  border: none;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: 1.2vw;
}

.news-area::-webkit-scrollbar {
  display: none;
}

.news-area * {
  user-select: none;
  pointer-events: none;
}

.headline {
  border-width: 1px;
  border-style: solid;
  border-color: #fff700;
	border-top: none;  
	border-right: none;  
	border-left: none;  
  margin: 2px;
  padding: 4px;
}

button {
  color: #fff;
  background-color: rgb(10, 37, 246);
  background: url('../images/image_button_b3.png') no-repeat;
  width: 96px;
  height: 36px;
  padding: 4px;
  font-size: 20px;
  margin: 16px;
  border: none;
}

button:hover {
  opacity: 0.8;
}

button:active {
	-webkit-transform: translate(2px,2px);
	-moz-transform: translate(2px,2px);
	transform: translate(2px,2px);
	border-bottom:none;  
}

span.red {
  color: rgb(248, 78, 78);
}