body {
  text-align: center;
  margin: 5px auto;
  background-color: #ddd;
  /* background-image: url("./img/back.jpg") */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome and Opera */
}

.border {
  margin:20px 0;
  border-bottom:2px solid #eee;
}

#info_area {
  width: 100%;
  height: 50px;
}
#q_type {
  font-size: 40px;
  font-weight: 700;
  color:#133;
  /* background-color: #133; */
}

#canvas {
  border: 10px solid #FE9A2E;
  border-radius: 5px;
  background: #fff;
  cursor: url(../img/pointer.cur), auto;
}
#wrapper{
  position: relative;
  width: 100%;
  height: 80%;
  margin: 0;
}

#color_circle_area {
  position: absolute;
  top:calc(100% - 260px);
  left: calc(100% - 360px);
  width: 350px;
  height: 250px;
  padding: 10px;
  background-color: rgba(10,10,10,0.8);
  border-radius:100px;
  color: #eee;
  cursor:move;
}
/* #container {
  width: 300px;
  height: 195px;
} */

#colorpicker {
  display: inline-block;
  height: 195px;

}
.farbtastic {
  position: absolute;
  top:10px;
  left: 10px;
}
#color_box {
  position: absolute;
  display: inline-block;
  top:0px;
  right: 10px;
  width: 160px;
  height: 200px;
}
#color {
  text-align: center;
  width: 10px;
  height: 10px;
  margin:110px 0 0 0;
  border: 1px #ddd solid;
  border-radius: 50px;
  /* vertical-align:top; */
}
li {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.colorPicker{
  height: 500px;
}

#comment_area{
  display: block;
  position: relative;
  height: 400px;
  width: 70%;
  margin: 25px 0;
}

#comment_box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(10,10,10,0.3);
  border-radius: 5px;
  text-align: center;
}
.comment_in_box {
  width:98%;
  margin: 5px 0;
  background-color: rgba(10,10,10,0.8);
  padding: 8px 1%;
  border-radius: 5px;
  display: block;
  text-align: left;
}
.comment_in_box img{
  width: 60px;
  margin: 0;
  vertical-align: top;
}
.name_com_box {
  width: calc(100% - 60px);
  display: inline-block;
  font-size: 20px;
}
.comment_name {
  color: #1DE9B6;
  white-space: nowrap;
}
.comment_com {
  color: #eee;
}
.bingo_user {
  background-color: rgba(40,40,0,0.8);
}
#page_top {
  position: absolute;
  top:10px;
  right: 20px;
  width: 50px;
  height: 50px;
}
.bingo_border {
  width: 100%;
  height: 20px;
  margin: 2px 0;
  background: yellow;
}

#menu_1 {
  position: absolute;
  width: 60px;
  top:60px;
  right: 3px;
  padding:5px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 5px;
}
#menu_1 img{
  position: relative;
  width: 50px;
  margin: 5px 0px;
  padding: 5px;
  border-radius: 50px;
}
#menu_2 {
  position: absolute;
  width: 60px;
  top:60px;
  left: 3px;
  padding:5px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 5px;
}
#menu_2 img{
  position: relative;
  width: 50px;
  margin: 5px 0px;
  padding: 5px;
  border-radius: 50px;
}
#menu_2 p{
  position: relative;
  height: 50px;
  width: 50px;
  margin: 20px 5px;
  background-color: rgba(255,255,255,1);
  border-radius: 50px;
}
.menu_on {
  background-color: rgba(250,250,0,0.5);
}
#shape_list {
  display: none;
  position: absolute;
  width: 60px;
  top:205px;
  right: 65px;
  padding:5px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 5px;
}
#shape_list img{
  position: relative;
  width: 50px;
  margin: 5px 0px;
  padding: 5px;
  border-radius: 50px;
}
#stamp_list {
  display: none;
  position: absolute;
  width: 60px;
  max-height: 300px;
  top:400px;
  right: 70px;
  padding:5px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 5px;
}
#stamp_list img{
  position: relative;
  width: 50px;
  margin: 5px 0px;
  padding: 5px;
  border-radius: 50px;
}

/* コネクトエリア */
#connect_area {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 60px;
  background-color: rgba(50,50,50,0.9);
  border-radius: 0 0 10px 10px;
}
#connect_sr_url {
  display: inline-block;
  height: 50px;
  padding: 5px 0 5px 0;
  margin: 0;
  border-radius: 2px;
  color: #eee;
  font-size: 30px;
}
#connect_url {
  display: inline-block;
  width: 40%;
  height: 50px;
  margin: 5px 0 5px 1%;
  background-color: rgba(200,200,200,1.0);
  border-radius: 2px;
  color: #111;
  font-size: 30px;
}
#connect_button {
  display: inline-block;
  width: 8%;
  margin: 5px 1% 5px 0;;
  background-color: rgba(20,20,100,0.9);
  border-radius: 10px;
  color: #eee;
  font-size: 35px;
  vertical-align: top;
}

/* 出題エリア */
#question_area {
  display: none;
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 60px;
  background-color: rgba(50,50,50,1.0);
  border-radius: 0 0 10px 10px;
}
#q_text_input {
  display:none;
  width: 70%;
  height: 40px;
  margin: 5px 0 5px 1%;
  background-color: rgba(200,200,200,0.9);
  border-radius: 2px;
  color: #112222;
  font-size: 30px;
  text-align: center;
}
#question_area #q_prev {
  position: absolute;
  top: 5px;
  left : 20px;
  height: 50px;
}
#question_area #q_next {
  position: absolute;
  top: 5px;
  left : 90px;
  height: 50px;
}
#question_area #shiritori_button {
  display: none;
  position: absolute;
  top: 5px;
  right: 80px;
  height: 40px;
  padding: 5px;
  border-radius: 50px;
}
#question_area #hint_button {
  position: absolute;
  top: 5px;
  right: 80px;
  height: 40px;
  padding: 5px;
  border-radius: 50px;
}
#question_area #q_text_input_button {
  position: absolute;
  top: 5px;
  right: 20px;
  height: 40px;
  padding: 5px;
  border-radius: 50px;
}
#question_area p {
  display: inline-block;
  width: 70%;
  font-size: 30px;
  color:#eee;
  vertical-align: top;
  margin: 10px 0 0 0;
}

/* #question[title]:before {
  font-size: 100px;
} */


/* ビンゴユーザー */
#bingo_user_area {
  position: absolute;
  top:60px;
  left:5%;
  width: 23%;
  height: 80%;
  /* overflow-y:auto; */
  /* overflow-x:hidden; */
  overflow:hidden;
  user-select: none;
  pointer-events: none;
}
.bingo_user_comment_in_box {
  max-width:98%;
  margin: 5px 0;
  background-color: rgba(10,10,10,0.8);
  padding: 8px 1%;
  border-radius: 5px;
  display: block;
  text-align: left;
}
.bingo_user_point {
  position: relative;
  display: inline-block;
  width: 100px;
  margin: 0;
  text-align: center;
  vertical-align: top;
  font-size: 50px;
  color: #eee;
  background-color: rgba(10,40,40,0.9);
  padding: 0 5px;
  border-radius: 20px;
}
.plus_bing_point {
  position: absolute;
  top:5px;
  left: 5px;
  font-size: 20px;
  color: yellow;
}
.bingo_user_comment_in_box img{
  width: 60px;
  margin: 0;
  vertical-align: top;
}
.bingo_user_name_com_box {
  width: calc(100% - 100px - 100px);
  display: inline-block;
  font-size: 40px;
}
.bingo_user_comment_name {
  color: #eee;
  white-space: nowrap;
}

/* ビンゴテキスト */
#bingo_q {
  display: none;
  position: absolute;
  top: 60px;
  width: 60%;
  margin: 0 0 0 30%;
  text-align: left;
  background-color: rgba(10,10,10,0.9);
  border-radius: 10px;
  user-select: none;
  pointer-events: none;
}
#bingo_q_time {
  display: inline-block;
  margin: 0 0 0 5%;
  min-width: 60px;
  /* height: 50px; */
  text-align: center;
  padding: 5px;
  color: #111;
  font-size: 50px;
  background: yellow;
  border-radius: 50px;
}
#bingo_q_text {
  display: inline-block;
  width: 80%;
  color: #eee;
  font-size: 55px;
  text-align: center;
}

/* 設定 */
#setting_area {
  display: none;
  position: absolute;
  top:100px;
  right: 100px;
  width: 200px;
  /* height: 80%; */
  padding: 5px 20px;
  border-radius: 10px;
  background-color: rgba(10,10,10,0.9);
  overflow-y: auto;
  overflow-x: hidden;
}
.setting_box {
  background: #233;
  margin: 10px 0;
  padding: 10px 10px;
  border-radius: 10px;
}
.setting_box .setting_on{
  background: yellow;
  color: #111;
}
.setting_box .setting_off{
  background: #133;
  color: #eee;
}
.setting_box p{
  color:#eee;
  font-size: 16px;
  text-align: center;
  margin: 5px 0;
}
.setting_box select{
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: bold;
}
.setting_box button{
  font-size: 14px;
  text-align: center;
  margin: 10px 0;
  padding: 5px 50px;
  border-radius: 10px;
  font-weight: bold;
  outline:none;
}


/* テキスト */
#text_area {
  display: none;
  position: absolute;
  top:85%;
  left: 5%;
  width: 55%;
  background-color: rgba(10,30,30,0.9);
  padding: 7px 10px;
  border-radius: 10px;
  cursor: move;
  white-space: nowrap;
}
#text_area input{
  width: 100%;
  padding: 5px 0;
  text-align: center;
  font-size: 40px;
  color: #111;
}


/* 正解ユーザーポイント */
#user_point_list {
  display: none;
  position: absolute;
  top:150px;
  left: 5%;
  width: 50%;
  height: 80%;
  background-color: rgba(10,30,30,0.9);
  padding: 7px 10px;
  border-radius: 10px;
  text-align: left;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
}
.user_point {
  width: 100%;
  background-color: rgba(30,30,30,0.9);
  margin: 5px 0;
  border-radius: 5px;
  white-space: nowrap;

}
.user_point_text {
  display: inline-block;
  width: 70px;
  height: 50px;
  background-color: yellow;
  border-radius: 10px;
  font-size: 50px;
  text-align: center;
  margin: 0 10px 0 0;
  color: #111;
}
.user_point_name {
  display: inline-block;
  font-size: 50px;
  color: #eee;
}

/* しりとり */
#shiritori_text_area {
  display: none;
  position: absolute;
  top: 80px;
  left: 120px;
  width: 80px;
  height: 80px;
  background-color: rgba(200,200,30,0.9);
  user-select: none;
  pointer-events: none;
  padding: 10px;
  border-radius: 50px;
}
#shiritori_text_area p{
  font-size: 60px;
}

/* ヒント */
#hint_text_area {
  display: none;
  position: absolute;
  top: 80px;
  left: 120px;
  width: 80px;
  height: 80px;
  background-color: rgba(200,200,30,0.9);
  user-select: none;
  pointer-events: none;
  padding: 10px;
  border-radius: 50px;
}
#hint_text_area p{
  font-size: 60px;
}

/* 制限時間 */
#draw_time_area {
  display: none;
  position: absolute;
  top: 80px;
  right: 120px;
  width: 80px;
  height: 80px;
  background-color: rgba(200,200,30,0.9);
  user-select: none;
  /* pointer-events: none; */
  padding: 8px;
  border-radius: 50px;
}
#draw_time_area p{
  font-size: 60px;
}

/* ギフトアニメ */
#gift_anime_box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* height: calc(80% + 100px); */
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
.free_gift_img {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 1;
  color: rgba(45,45,45, 0.1);
  overflow: hidden;
}

/* .pay_gift_img_box {
  width: 170px;
  height: 60px;
  vertical-align:top;
}
.pay_gift_img_box img{
  width: 60px;
  height: 60px;
} */
.pay_gift_img {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 1;
  color: rgba(45,45,45, 0.1);
  overflow: hidden;
}

/* ロゴ */
#logo {
  position: absolute;
  bottom: -5px;
  left: 15px;
  color: rgba(200,200,200, 0.8);
  font-size: 30px;
  user-select: none;
  pointer-events: none;
}

/* カラーパレット */
#palet {
  position: absolute;
  bottom:0px;
  right: 0px;
  width: 50px;
  height: 50px;
  background-color: rgba(10,10,10,0.8);
  padding: 5px;
  border-radius: 50px;
}

#color_palet_area {
  position: absolute;
  top:calc(100% - 180px);
  left: calc(100% - 360px);
  width: 350px;
  height: 170px;
  padding: 10px;
  background-color: rgba(10,10,10,0.8);
  border-radius:100px;
  color: #eee;
  cursor:move;
}

#color_button {
  margin: 10px 0;
}
#color_button p{
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin: 5px;
  border: 1px #ddd solid;
  cursor:pointer;
}


/* ブラシサイズポップアップ */
#brush_size_pop {
  display: block;
  position: absolute;
  width: 100%;
  top:-55px;
  user-select: none;
  pointer-events: none;
}
#brush_size_pop p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0,0,0, 0.6);
  border-radius: 100px;
  background-color: rgb(255,0,0);
}

.palet_change {
  position: absolute;
  bottom:40px;
  left: 30px;
  width: 30px;
  height: 30px;
}

/* 隠し */
.secret_button {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  padding: 5px;
}
.secret_button:hover{
  background-color: #991;
}
#secret_button {
  top:10px;
  right: 10px;
}
#sound_button {
  bottom:10px;
  left: 10px;
}
#sound_select {
  display: none;
  position: absolute;
  bottom:0px;
  left: 90px;
  padding: 5px 10px;
  background-color: rgba(10,10,10,0.9);
  border-radius: 10px;
}
#sound_select p{
  color: #eee;
  font-size: 20px;
  margin: 5px 0;
  text-align: left;
}

/*--------------
   追加設定
--------------*/
#gift_anime_box {
  z-index: 9999;
}
#bingo_user_area {
  z-index: 99;
}
#setting_area {
  z-index: 99;
}
#user_point_list{
  z-index: 999;
}
#logo{
  z-index: 9;
}
.color_palet{
  z-index: 10;
}
#palet{
  z-index: 10;
}
#page_top {
  z-index: 9999999999999;
}
#brush_size_pop {
  z-index: 9;
}
#sound_select {
  z-index: 11;
}

/* 非表示 */
#bucket,#stamp,#color_circle_area,#color_palet_area {
  display: none;
}