.bg-01 {background-image: url('../images/background/bg-01.webp');}
.bg-02 {background-image: url('../images/background/bg-02.webp');}
.bg-size {background-size: 1600px;}



.framelink {
    display: inline-block;
    position: relative;
  }
.framelink img {
    padding: 8%;
}

.framelink:after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url('/games/images/background/frame.webp') center center no-repeat;
background-size: 100%;
}

.frameimg {
    display: inline-block;
    position: relative;
  }
.frameimg img {
    padding: 8%;
}

.frameimg:after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: url('/games/images/background/frame.webp') center center no-repeat;
background-size:contain;
}



#heart-first{
  cursor: pointer ;
}

.heart-stage{
  position:fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  pointer-events: none;
}

#heart {
  max-width: 280px;
  transition: left .5s ease-in, top .5s ease-in;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  position:absolute;
  pointer-events: auto; 
}



#heart img {
  cursor: pointer ;
  margin-bottom: 5px;
}

.bubble{
  background-color: white;
  border-radius: 5px;
  display: inline-block;
  padding: 10px;
  position: relative;
  vertical-align: top;
  margin:5px;
  margin-bottom: 15px;
  color:black;
}

.bubble::before {
  background-color: white;
  content: "\00a0";
  display: block;
  height: 16px;
  width: 16px;
  position: absolute;
  bottom: -8px;
  left:50%;
  transform: translateX(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  -o-transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg); 
}