/*-------------------------------------花芽なずな*/
#kagana {
  background: #ffb6c1;
  overflow: hidden;
}

#kagana .background-grad {
  background: transparent;
  position: relative;
  z-index: 10;
}

#kagana .background-grad::before {
  position: absolute;
  content: "";
  width: 200vw;
  height: 200vw;
  top: -100vw;
  left: -100vw;
  border-radius: 50%;
  background-color: pink;
  background: 
  linear-gradient(to bottom, lightpink 50%, transparent 50% ),
  linear-gradient(to right, lightpink 50%, transparent 50%),
  radial-gradient(circle,
  lightpink 5vw, #fabedc 5vw, #fabedc 10vw,
  lightpink 10vw, lightpink 15vw, #86626f 15vw,#86626f 20vw,
  lightpink 20vw, lightpink 25vw, #fabedc 25vw, #fabedc 30vw,
  lightpink 30vw, lightpink 35vw, #86626f 35vw,#86626f 40vw,
  lightpink 40vw, lightpink 45vw, #fabedc 45vw, #fabedc 50vw,
  lightpink 50vw, lightpink 55vw, #86626f 55vw,#86626f 60vw,
  lightpink 60vw, lightpink 65vw, #fabedc 65vw, #fabedc 70vw,
  lightpink 70vw, lightpink 75vw, #86626f 75vw,#86626f 80vw,
  lightpink 80vw, lightpink 85vw, #fabedc 85vw, #fabedc 90vw,
  lightpink 90vw, lightpink 95vw, #86626f 95vw,#86626f 100vw);

  animation: kagana-background 3s linear 0s 1;
  -webkit-animation: kagana-background 3s linear 0s 1;
}

.kagana-top-text,
.kagana-profile,
.kagana-tag,
.kagana-movie {
  background: #fabedc;
  color: #684c56;
  border-radius: 3rem;
  border: 5px solid #86626f;
  z-index: 2;
}

.kagana-wrapper {
  position: relative;
}



.kagana-wrapper .kagana-ribbon.animation-start.is-animated {
  position: absolute;
  width: 100vw;
  height: 5rem;
  right: 0;
  background: linear-gradient(-45deg,#b0c4de 0%, #ffffff 50%, #b0c4de 100%);
  animation: kagana-ribbon 5s linear 1 forwards;
  -webkit-animation: kagana-ribbon 5s linear 1 forwards;
}

.kagana-wrapper .kagana-ribbon.animation-start.is-animated::before {
  position: absolute;
  content: "";
  top: -100%;
  left: 0;
  transform: translate(-35%,-50%) rotate(45deg);
  -webkit-transform: translate(-35%,-50%) rotate(45deg);
  width: 10rem;
  height: 16rem;
  background: linear-gradient(-45deg,#b0c4de 0%, #ffffff 50%, #b0c4de 100%);
  border-radius: 50% 50% 0 0;
  box-shadow: 2.5px 0 5px #000;
  animation: heart 2s linear 5s 1 forwards;
  opacity: 0;
}