body{
  margin:0;
  background:#ffffff;
  font-family:'Yusei Magic',sans-serif;
  text-align:center;
  font-size:6vw;
}

.page{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  overflow: hidden;
}

.page.active{
  display:block;
}

.heart{
   width: 15vw;
  height: 15vw;
  max-width: 60px;
  max-height: 60px;
  position: absolute;
  background: linear-gradient(45deg,#ff4d6d, #ff1a4d);
  clip-path: polygon(50% 80%, 0% 30%, 25% 0%, 50% 20%, 75% 0%, 100% 30%);
  cursor: pointer;
  }

.big{
  width: 25vw;
  height: 25vw;
  max-width: 150px;
  max-height: 150px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }

.heart3d{
  width:150px;
  height:150px;
  margin:0 auto;
  background:linear-gradient(45deg,#ff4d6d, #ff1a4d);
  clip-path: polygon(50% 80%, 0% 30%, 25% 0%, 50% 20%, 75% 0%, 100% 30%);
  animation: beat 1s infinite;
}

@keyframes beat{
  0%{transform:scale(1);}
  50%{transform:scale(1.2);}
  100%{transform:scale(1);}
}
/* 落ちてくる小さいハート */
#fallArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.fallHeart {
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg,#ff4d6d, #ff1a4d);
  clip-path: polygon(50% 80%, 0% 30%, 25% 0%, 50% 20%, 75% 0%, 100% 30%);
  animation: fall 3s linear forwards;
  z-index: 10;
}

@keyframes fall {
  0% { transform: translateY(-20px); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@media (max-width: 600px) {
  .heart {
    width: 16vw;
    height: 16vw;
  }
}