/*
z-indexの値付けルールについて
------------------------
______0 - ___4999: 主なコンテンツ
3000000 - 3999999: チャットや告知などのポップアップ（ツール選択系モーダルなど含む）
5000000 - 5999999: ドロップダウンUI、サイト内ナビゲーションUI、固定ヘッダや固定フッタなど

 */


.monster-alphabet {
  position: absolute;
}

.monster-alphabet div {
  padding-top: 30px;
  width: 365px;
  height: 245px;
  position: absolute;
  top: 44px;
  font-size: 257px;
  text-align: center;
  line-height: 0.9;
  background: #fff;
  border: 1px solid #000;
}

.vista.chrome .monster-alphabet div {
  padding-top: 0px;
}

.monster-alphabet-lowercase div {
  padding-top: 30px;
  width: 365px;
  height: 275px;
  position: absolute;
  top: 44px;
  font-size: 257px;
  text-align: center;
  line-height: 0.9;
  background: #fff;
  border: 1px solid #000;
}

.vista.chrome .monster-alphabet-lowercase div {
  padding-top: 0px;
}

.monster-alphabet2 div {
  padding-top: 30px;
  width: 465px;
  height: 245px;
  position: absolute;
  top: 44px;
  font-size: 257px;
  text-align: center;
  line-height: 0.9;
  background: #fff;
  border: 1px solid #000;
  left: 640px;
}
.vista.chrome .monster-alphabet2 div {
  padding-top: 0px;
}
.monster-alphabet3 div {
  padding-top: 30px;
  width: 575px;
  height: 245px;
  position: absolute;
  top: 44px;
  font-size: 257px;
  text-align: center;
  line-height: 0.9;
  background: #fff;
  border: 1px solid #000;
  left: 590px;
}
.vista.chrome .monster-alphabet3 div {
  padding-top: 0px;
}

.monster-alphabet3-lowercase div {
  padding-top: 30px;
  width: 575px;
  height: 275px;
  position: absolute;
  top: 44px;
  font-size: 257px;
  text-align: center;
  line-height: 0.9;
  background: #fff;
  border: 1px solid #000;
  left: 590px;
  letter-spacing: 15px;
}
.vista.chrome .monster-alphabet3-lowercase div {
  padding-top: 0px;
}

.alphabet_monster_num {
  position: absolute;
  top: 46px;
  left: 40px;
}


.monster-word01 {
  left: 109px;
}
.monster-word02 {
  left: 691px;
}
.monster-word03 {
  left: 1280px;
}

.pic-monster01 {
  width: 583px;
  bottom: 18px;
  left: 0;
  text-align: center;
}
.pic-monster02 {
  width: 583px;
  bottom: 18px;
  left: 583px;
  text-align: center;
}
.pic-monster03 {
  width: 583px;
  bottom: 18px;
  left: 1166px;
  text-align: center;
}

.pic-monster-full {
  width: 1749px;
  bottom: 0px;
  left: 0;
  text-align: center;
}
.pic-monster01.img-fix.js-img-sound:hover:after,
.pic-monster02.img-fix.js-img-sound:hover:after,
.pic-monster03.img-fix.js-img-sound:hover:after,
.pic-monster01.img-fix.js-img-sound-active:before,
.pic-monster02.img-fix.js-img-sound-active:before,
.pic-monster03.img-fix.js-img-sound-active:before {
  top: -20px;
  left: 70px;
  z-index: 3000000;
}

.pic-monster-full.img-fix.js-img-sound:hover:after,
.pic-monster-full.img-fix.js-img-sound-active:before {
  top: -20px;
  left: 70px;
  z-index: 3000000;
}