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

 */



.list-letter div {
  padding-top: 50px;
  width: 470px;
  height: 470px;
  font-size: 380px;
  text-align: center;
  line-height: 1.14;
  border: 12px solid #999;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  top: 259px;
}

.vista.chrome .list-letter div {
  padding-top: 10px;
}

.list-letter.double div{
  width: 520px;
  font-size: 220px;
  line-height: 1.78;
}
.list-letter.quadruple div{
  width: 890px;
  font-size: 220px;
  line-height: 2;
}
.list-letter div.on {
  border: 12px solid #F00;
  font-size: 438px;
  line-height: 0.9;
}
.list-letter.double div.on {
  font-size: 290px;
  line-height: 1.4;
}
.list-letter.quadruple div.on {
  padding-top: 25px;
  font-size: 260px;
  line-height: 1.7;
}
.list-letter div.repeat {
  border: 12px solid #005aff;
  font-size: 438px;
  line-height: 0.92;
}
.list-letter.double div.repeat {
  font-size: 290px;
  line-height: 1.4;
}
.list-letter.quadruple div.repeat {
  font-size: 260px;
  line-height: 1.7;
}
.list-letter-lowercase div {
  line-height: 0.95;
}
.list-letter-lowercase div.on, .list-letter-lowercase div.repeat {
  font-size: 470px;
  line-height: 0.73;
}
.letter-enable {
  display: block;
}
.letter-disable {
  display: none;
}
.letter01 {
  left: 100px;
}
.letter02 {
  left: 640px;
}
.letter03 {
  right: 100px;
}
.letter04 {
  left: 100px;
}
.letter05 {
  left: 640px;
}
.letter06 {
  right: 100px;
}
.letter07 {
  left: 100px;
}
.letter08 {
  left: 640px;
}
.letter09 {
  right: 100px;
}
.letter10 {
  left: 100px;
}
.letter11 {
  left: 640px;
}
.letter12 {
  right: 100px;
}

.double > .letter01 {
  left: 80px;
}
.double > .letter02 {
  left: 620px;
}
.double > .letter03 {
  left: 1160px;
}
.double > .letter04 {
  left: 80px;
}
.double > .letter05 {
  left: 620px;
}
.double > .letter06 {
  left: 1160px;
}
.double > .letter07 {
  left: 80px;
}
.double > .letter08 {
  left: 620px;
}
.double > .letter09 {
  left: 1160px;
}
.double > .letter10 {
  left: 80px;
}
.double > .letter11 {
  left: 620px;
}
.double > .letter12 {
  left: 1160px;
}

.letter2-01 {
  left: 270px;
}
.letter2-02 {
  left: 960px;
}
.letter2-03 {
  left: 270px;
}
.letter2-04 {
  left: 960px;
}
.letter2-05 {
  left: 270px;
}
.letter2-06 {
  left: 960px;
}
.letter2-07 {
  left: 270px;
}
.letter2-08 {
  left: 960px;
}
.letter2-09 {
  left: 270px;
}
.letter2-10 {
  left: 960px;
}
.letter2-11 {
  left: 270px;
}
.letter2-12 {
  left: 960px;
}
.letter2-13 {
  left: 270px;
}
.letter2-14 {
  left: 960px;
}
.letter2-15 {
  left: 270px;
}
.letter2-16 {
  left: 960px;
}
.letter2-17 {
  left: 270px;
}
.letter2-18 {
  left: 960px;
}

.quadruple > .letter2-01 {
  left: -20px;
}
.quadruple > .letter2-02 {
  left: 890px;
}
.quadruple > .letter2-03 {
  left: -20px;
}
.quadruple > .letter2-04 {
  left: 890px;
}
.quadruple > .letter2-05 {
  left: -20px;
}
.quadruple > .letter2-06 {
  left: 890px;
}
.quadruple > .letter2-07 {
  left: -20px;
}
.quadruple > .letter2-08 {
  left: 890px;
}
.quadruple > .letter2-09 {
  left: -20px;
}
.quadruple > .letter2-10 {
  left: 890px;
}
.quadruple > .letter2-11 {
  left: -20px;
}
.quadruple > .letter2-12 {
  left: 890px;
}
.quadruple > .letter2-13 {
  left: -20px;
}
.quadruple > .letter2-14 {
  left: 890px;
}
.quadruple > .letter2-15 {
  left: -20px;
}
.quadruple > .letter2-16 {
  left: 890px;
}
.quadruple > .letter2-17 {
  left: -20px;
}
.quadruple > .letter2-18 {
  left: 890px;
}