/*
z-indexの値付けルールについて
------------------------
______0 - ___4999: 主なコンテンツ
3000000 - 3999999: チャットや告知などのポップアップ（ツール選択系モーダルなど含む）
5000000 - 5999999: ドロップダウンUI、サイト内ナビゲーションUI、固定ヘッダや固定フッタなど

 */

.list-letter01.on,
.list-letter02.on,
.list-letter03.on,
.list-letter04.on,
.list-letter05.on {
  width: 1582px;
  height: 170px;
  background: #DCF0FA;
  border-radius: 20px;
  position: absolute;
  left: 84px;
}
.list-letter01 {
  top: 22px;
}
.list-letter02 {
  top: 207px;
}
.list-letter03 {
  top: 396px;
}
.list-letter04 {
  top: 584px;
}
.list-letter05 {
  top: 766px;
}



.bingo-roulette {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 85px;
  left: 534px;
}

.list-letter li {
/*   height: 144px; */
  position: absolute;
  text-align: center;
  padding: 0px 10px 0px 10px;
}
.item-letter {
  font-size:120px;
  text-align: center;
}
.vista.chrome .item-letter {
  font-size:120px;
  text-align: center;
  margin-top: -15px;
  margin-bottom: 15px;
}
.group-bg-on {
  background: #DCF0FA;
  border-radius: 10px;
}
.group-letter01 {
  top: 20px;
  left: 144px;
}
.group-letter02 {
  top: 20px;
  left: 470px;
}
.group-letter03 {
  top: 20px;
  left: 751px;
}
.group-letter04 {
  top: 20px;
  left: 1123px;
}
.group-letter05 {
  top: 20px;
  left: 1449px;
}

.group-letter06 {
  top: 211px;
  left: 144px;
}
.group-letter07 {
  top: 211px;
  left: 427px;
}
.group-letter08 {
  top: 211px;
  left: 797px;
}
.group-letter09 {
  top: 211px;
  left: 1123px;
}
.group-letter10 {
  top: 211px;
  left: 1449px;
}

.group-letter11 {
  top: 403px;
  left: 144px;
}
.group-letter12 {
  top: 403px;
  left: 470px;
}
.group-letter13 {
  top: 403px;
  left: 797px;
}
.group-letter14 {
  top: 403px;
  left: 1123px;
}
.group-letter15 {
  top: 403px;
  left: 1449px;
}

.group-letter16 {
  top: 594px;
  left: 144px;
}
.group-letter17 {
  top: 594px;
  left: 470px;
}
.group-letter18 {
  top: 594px;
  left: 797px;
}
.group-letter19 {
  top: 594px;
  left: 1123px;
}
.group-letter20 {
  top: 594px;
  left: 1449px;
}

.group-letter21 {
  top: 785px;
  left: 144px;
}
.group-letter22 {
  top: 785px;
  left: 405px;
}
.group-letter23 {
  top: 785px;
  left: 666px;
}
.group-letter24 {
  top: 785px;
  left: 927px;
}
.group-letter25 {
  top: 785px;
  left: 1188px;
}
.group-letter26  {
  top: 785px;
  left: 1449px;
}



.group-letter-2in1-01 {
  width:200px;
  top: 40px;
  left: 207px;
}
.group-letter-2in1-02 {
  width:200px;
  top: 40px;
  left: 533px;
}

.group-letter-2in1-06 {
  width:200px;
  top: 226px;
  left: 207px;
}
.group-letter-2in1-07 {
  width:200px;
  top: 226px;
  left: 533px;
}
.group-letter-2in1-11 {
  width:200px;
  top: 415px;
  left: 207px;
}
.group-letter-2in1-12 {
  width:200px;
  top: 415px;
  left: 533px;
}

.group-letter-2in1-16 {
  width:200px;
  top: 602px;
  left: 207px;
}
.group-letter-2in1-17 {
  width:200px;
  top: 602px;
  left: 533px;
}

.group-letter-2in1-21 {
  width:200px;
  top: 786px;
  left: 207px;
}
.group-letter-2in1-22 {
  width:200px;
  top: 786px;
  left: 468px;
}

.door-group div {
  position: absolute;
  cursor: pointer;
}
.door-num01 {
  top: 23px;
  left: 220px;
}
.door-num02 {
  top: 23px;
  left: 752px;
}
.door-num03 {
  top: 23px;
  left: 1288px;
}
.door-num04 {
  top: 567px;
  left: 219px;
}
.door-num05 {
  top: 567px;
  left: 735px;
}
.door-etc {
  top: 567px;
  left: 1279px;
}
.door-group-detail-num {
  position: absolute;
  top: 57px;
  left: 101px;
}
.door-group-detail table {
  width: 833px;
  height: 765px;
  position: absolute;
  top: 154px;
  left: 454px;
  border: 8px solid #000;
}
.door-group-detail table td {
  width: 33%;
  height: 255px;
  text-align: center;
  vertical-align: middle;
  border: 8px solid #000;
  border-collapse: collapse;
}
.door-group-detail table.door-group-detail01 td.on {
  background: #d5ebf6;
}
.door-group-detail table.door-group-detail02 td.on {
  background: #f6cdd5;
}
.door-group-detail table.door-group-detail03 td.on {
  background: #f7e3be;
}
.door-group-detail table.door-group-detail04 td.on {
  background: #e1eccd;
}
.door-group-detail table.door-group-detail05 td.on {
  background: #e8dae8;
}
.door-group-detail table.door-group-detail06 td.on {
  background: #f7d4c5;
}
.door-group-detail table td div {
  font-size: 125px;
  position: relative;
}

.door-group-all div {
  height: 204px;
  padding: 0 40px 0 68px;
  padding-top: 15px;
  text-align: center;
  vertical-align: middle;
  border: 8px solid #000;
  position: relative;
  font-size: 103px;
  line-height: 1.75;
  letter-spacing: 30px;
  position: absolute;
  cursor: pointer;
}
.door-group-item01 {
  top: 42px;
  left: 344px;
  background: #d5ebf6;
}
.door-group-item02 {
  top: 301px;
  left: 344px;
  background: #f6cdd5;
}
.door-group-item03 {
  top: 560px;
  left: 344px;
  background: #f7e3be;
}
.door-group-item04 {
  top: 560px;
  left: 918px;
  background: #e1eccd;
}
.door-group-item05 {
  top: 820px;
  left: 344px;
  background: #e8dae8;
}
.door-group-item06 {
  top: 820px;
  left: 693px;
  background: #f7d4c5;
}

.door-group-all div.js-img-sound:hover:after,
.door-group-all div.js-img-sound-active:before {
  top: -60px;
  left: 0px;
  z-index: 3000000;
}

.door-group-detail table td.on div.js-img-sound:hover:after,
.door-group-detail table td.on div.js-img-sound-active:before {
  top: -90px;
  left: 0px;
  z-index: 3000000;
}


