@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&display=swap");
.top3-5 {
  font-family: Montserrat;
}

/*button*/
 .top3-5-btns {
  padding: 1em 2em;
  /* background-color: rgba(41, 129, 216, 0.9);   #2981d8 */
  background-color: pink;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 40px;
  transition: transform ease 0.2s, box-shadow ease 0.2s;
  display: inline-block;
  font-size: 18px;
  width: 200px;
  z-index: 2;
  position: fixed;
  bottom: 210px;
  text-align: center;

}

 .top3-5-btns:hover {
  transform: translate(0, -3px);
  box-shadow: 0 20px 80px -10px #2981d8;
  ;
}













.top3-5 {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: center/cover no-repeat url("./img/留言背景.jpg"), #f0f0f0;
  overflow: hidden;
  perspective: 1440px;
}



.top3-5 .navi {
  position: absolute;
  width: 20vh;
  max-width: 80px;
  aspect-ratio: 1/1;
  top: 30vh;
  left: 28vw;
  animation: naviFlight 6s ease-in-out infinite;
}

.top3-5 .navi .glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #fafafe 40%, #acadd0 45%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 15px 25px #b7b8e55f;
}

.top3-5 .navi .glow::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: #f0f0f05f;
  border-radius: 50%;
  translate: -25% -25%;
  filter: blur(6px);
  z-index: -1;
}

.top3-5 .navi .wings {
  position: absolute;
  width: 100%;
  height: 200%;
  bottom: -33.3%;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-25deg);
  animation: wingTurn 6s ease-in-out infinite;
}

.top3-5 .navi .wings .wing {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  translate: -50%;
  transform-origin: right center;
  transform: rotateY(30deg);
  animation: flapLeft 0.375s ease-in-out infinite alternate;
}

.top3-5 .navi .wings .wing.right {
  transform: rotateY(-30deg);
  rotate: 0 1 0 180deg;
  animation-name: flapRight;
}

.top3-5 .navi .wings div {
  width: 100%;
}

.top3-5 .navi .wings .top {
  height: 50%;
  background: #f0f0f0;
  clip-path: polygon(12% 18%, 35% 13%, 79% 53%, 100% 100%, 67% 90%, 14% 46%);
}

.top3-5 .navi .wings .bottom {
  height: 50%;
  background: #f0f0f0;
  clip-path: polygon(2% 81%, 18% 59%, 51% 50%, 53% 75%, 31% 94%, 14% 100%);
}

.top3-5 .title {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: clamp(1rem, 18rem, 30vw) "Crimson Text";
  z-index: 20;
}

@font-face {
  font-family: "top3-TitleFont";
  src: url("font/SmileySans-Oblique.ttf") format("truetype");
}



.top3-5 .title h2 {
  font-size: 35%;
  font-family: STXihei,Arial, sans-serif;
  background: 0% 0%/100% 300% linear-gradient(to bottom, white, rgb(255 255 255), #e3a8c2, #fff, white);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: sheen2 12s linear infinite 0.75s;
}

.top3-5 .emitter {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform-style: preserve-3d;
}

.top3-5 .emitter.back {
  z-index: -4;
}

.top3-5 .emitter.back .particle:nth-child(1) {
  width: 0.0604492654rem;
  transform: translateX(46vw) translateZ(-78vw);
  animation-duration: 4.35s;
  animation-delay: -3.8715s;
}

.top3-5 .emitter.back .particle:nth-child(2) {
  width: 0.9443580745rem;
  transform: translateX(60vw) translateZ(-88vw);
  animation-duration: 4.31s;
  animation-delay: -1.4654s;
}

.top3-5 .emitter.back .particle:nth-child(3) {
  width: 0.8743591452rem;
  transform: translateX(98vw) translateZ(-84vw);
  animation-duration: 4.8s;
  animation-delay: -2.688s;
}

.top3-5 .emitter.back .particle:nth-child(4) {
  width: 0.2982104227rem;
  transform: translateX(55vw) translateZ(-84vw);
  animation-duration: 4.04s;
  animation-delay: -2.5452s;
}

.top3-5 .emitter.back .particle:nth-child(5) {
  width: 0.4895423043rem;
  transform: translateX(90vw) translateZ(-91vw);
  animation-duration: 4.67s;
  animation-delay: -1.4477s;
}

.top3-5 .emitter.back .particle:nth-child(6) {
  width: 0.601412135rem;
  transform: translateX(2vw) translateZ(-97vw);
  animation-duration: 4.97s;
  animation-delay: -2.7335s;
}

.top3-5 .emitter.back .particle:nth-child(7) {
  width: 0.4815820902rem;
  transform: translateX(55vw) translateZ(-7vw);
  animation-duration: 4.34s;
  animation-delay: -0.0434s;
}

.top3-5 .emitter.back .particle:nth-child(8) {
  width: 0.1188814653rem;
  transform: translateX(24vw) translateZ(-2vw);
  animation-duration: 4.4s;
  animation-delay: -1.76s;
}

.top3-5 .emitter.back .particle:nth-child(9) {
  width: 0.3096744823rem;
  transform: translateX(37vw) translateZ(-47vw);
  animation-duration: 4.62s;
  animation-delay: -3.465s;
}

.top3-5 .emitter.back .particle:nth-child(10) {
  width: 0.1407126238rem;
  transform: translateX(55vw) translateZ(-21vw);
  animation-duration: 4.09s;
  animation-delay: -3.4356s;
}

.top3-5 .emitter.back .particle:nth-child(11) {
  width: 0.5079717371rem;
  transform: translateX(40vw) translateZ(-65vw);
  animation-duration: 4.3s;
  animation-delay: -3.956s;
}

.top3-5 .emitter.back .particle:nth-child(12) {
  width: 0.7688049986rem;
  transform: translateX(18vw) translateZ(-27vw);
  animation-duration: 4.11s;
  animation-delay: -2.0139s;
}

.top3-5 .emitter.back .particle:nth-child(13) {
  width: 0.6792181479rem;
  transform: translateX(3vw) translateZ(-79vw);
  animation-duration: 4.93s;
  animation-delay: -0.0493s;
}

.top3-5 .emitter.back .particle:nth-child(14) {
  width: 0.1583105845rem;
  transform: translateX(96vw) translateZ(-33vw);
  animation-duration: 4.67s;
  animation-delay: -0.0934s;
}

.top3-5 .emitter.back .particle:nth-child(15) {
  width: 0.1468184243rem;
  transform: translateX(28vw) translateZ(-59vw);
  animation-duration: 4.82s;
  animation-delay: -0.3856s;
}

.top3-5 .emitter.back .particle:nth-child(16) {
  width: 0.0855558118rem;
  transform: translateX(36vw) translateZ(-81vw);
  animation-duration: 4.56s;
  animation-delay: -4.0584s;
}

.top3-5 .emitter.back .particle:nth-child(17) {
  width: 0.8545607534rem;
  transform: translateX(44vw) translateZ(-62vw);
  animation-duration: 4.61s;
  animation-delay: -2.0745s;
}

.top3-5 .emitter.back .particle:nth-child(18) {
  width: 0.4639209354rem;
  transform: translateX(7vw) translateZ(-78vw);
  animation-duration: 4.27s;
  animation-delay: -0.7686s;
}

.top3-5 .emitter.back .particle:nth-child(19) {
  width: 0.0907260611rem;
  transform: translateX(23vw) translateZ(-95vw);
  animation-duration: 4.4s;
  animation-delay: -3.344s;
}

.top3-5 .emitter.back .particle:nth-child(20) {
  width: 0.3609503456rem;
  transform: translateX(80vw) translateZ(-84vw);
  animation-duration: 4.25s;
  animation-delay: -3.0175s;
}

.top3-5 .emitter.back .particle:nth-child(21) {
  width: 0.9426810553rem;
  transform: translateX(45vw) translateZ(-6vw);
  animation-duration: 4.02s;
  animation-delay: -2.9748s;
}

.top3-5 .emitter.back .particle:nth-child(22) {
  width: 0.1379464724rem;
  transform: translateX(65vw) translateZ(-11vw);
  animation-duration: 4.14s;
  animation-delay: -1.1592s;
}

.top3-5 .emitter.back .particle:nth-child(23) {
  width: 0.9076345526rem;
  transform: translateX(98vw) translateZ(-48vw);
  animation-duration: 4.17s;
  animation-delay: -3.336s;
}

.top3-5 .emitter.back .particle:nth-child(24) {
  width: 0.0475511549rem;
  transform: translateX(92vw) translateZ(-58vw);
  animation-duration: 4.56s;
  animation-delay: -2.0976s;
}

.top3-5 .emitter.back .particle:nth-child(25) {
  width: 0.0549155787rem;
  transform: translateX(5vw) translateZ(-11vw);
  animation-duration: 4.02s;
  animation-delay: -3.3768s;
}

.top3-5 .emitter.back .particle:nth-child(26) {
  width: 0.0218125779rem;
  transform: translateX(97vw) translateZ(-92vw);
  animation-duration: 4.68s;
  animation-delay: -1.4976s;
}

.top3-5 .emitter.back .particle:nth-child(27) {
  width: 0.6476771254rem;
  transform: translateX(18vw) translateZ(-95vw);
  animation-duration: 4.31s;
  animation-delay: -0.2155s;
}

.top3-5 .emitter.back .particle:nth-child(28) {
  width: 0.2816732702rem;
  transform: translateX(41vw) translateZ(-83vw);
  animation-duration: 4.25s;
  animation-delay: -1.19s;
}

.top3-5 .emitter.back .particle:nth-child(29) {
  width: 0.4872044591rem;
  transform: translateX(65vw) translateZ(-53vw);
  animation-duration: 4.92s;
  animation-delay: -0.3936s;
}

.top3-5 .emitter.back .particle:nth-child(30) {
  width: 0.6456134296rem;
  transform: translateX(71vw) translateZ(-97vw);
  animation-duration: 4.79s;
  animation-delay: -0.2874s;
}

.top3-5 .emitter .particle {
  position: absolute;
  width: 0.28rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1rem -0.5rem #fff;
  animation: pFloatUp 1s cubic-bezier(0.99, 0.1, 1, 1) infinite;
}

.top3-5 .emitter .particle:nth-child(1) {
  width: 0.4882597046rem;
  background: #fff;
  transform: translateX(84vw) translateZ(40vw);
  animation-duration: 4.51s;
  animation-delay: -1.3981s;
}

.top3-5 .emitter .particle:nth-child(2) {
  width: 0.605448763rem;
  background: #fff;
  transform: translateX(95vw) translateZ(17vw);
  animation-duration: 4.96s;
  animation-delay: -0.744s;
}

.top3-5 .emitter .particle:nth-child(3) {
  width: 0.5128595664rem;
  background: #35568e;
  transform: translateX(96vw) translateZ(22vw);
  animation-duration: 4.28s;
  animation-delay: -3.4668s;
}

.top3-5 .emitter .particle:nth-child(4) {
  width: 0.0198820446rem;
  background: #fff;
  transform: translateX(84vw) translateZ(9vw);
  animation-duration: 4.63s;
  animation-delay: -1.7594s;
}

.top3-5 .emitter .particle:nth-child(5) {
  width: 0.0995184922rem;
  background: #35568e;
  transform: translateX(17vw) translateZ(8vw);
  animation-duration: 4.07s;
  animation-delay: -1.0989s;
}

.top3-5 .emitter .particle:nth-child(6) {
  width: 0.1482259404rem;
  background: #fff;
  transform: translateX(46vw) translateZ(44vw);
  animation-duration: 4.94s;
  animation-delay: -4.5942s;
}

.top3-5 .emitter .particle:nth-child(7) {
  width: 0.0180366193rem;
  background: #35568e;
  transform: translateX(15vw) translateZ(41vw);
  animation-duration: 4.78s;
  animation-delay: -3.107s;
}

.top3-5 .emitter .particle:nth-child(8) {
  width: 0.6190459023rem;
  background: #fff;
  transform: translateX(31vw) translateZ(23vw);
  animation-duration: 4.15s;
  animation-delay: -2.3655s;
}

.top3-5 .emitter .particle:nth-child(9) {
  width: 0.820148193rem;
  background: #fff;
  transform: translateX(22vw) translateZ(6vw);
  animation-duration: 4.03s;
  animation-delay: -0.806s;
}

.top3-5 .emitter .particle:nth-child(10) {
  width: 0.272534568rem;
  background: #fff;
  transform: translateX(53vw) translateZ(6vw);
  animation-duration: 4.81s;
  animation-delay: -1.7316s;
}

.top3-5 .emitter .particle:nth-child(11) {
  width: 0.6684480825rem;
  background: #fff;
  transform: translateX(89vw) translateZ(43vw);
  animation-duration: 4.43s;
  animation-delay: -4.2085s;
}

.top3-5 .emitter .particle:nth-child(12) {
  width: 0.5798142884rem;
  background: #fff;
  transform: translateX(4vw) translateZ(14vw);
  animation-duration: 4.44s;
  animation-delay: -0.4884s;
}

.top3-5 .emitter .particle:nth-child(13) {
  width: 0.4034127789rem;
  background: #fff;
  transform: translateX(49vw) translateZ(29vw);
  animation-duration: 4.79s;
  animation-delay: -2.6345s;
}

.top3-5 .emitter .particle:nth-child(14) {
  width: 0.571691885rem;
  background: #35568e;
  transform: translateX(34vw) translateZ(2vw);
  animation-duration: 4.39s;
  animation-delay: -1.756s;
}

.top3-5 .emitter .particle:nth-child(15) {
  width: 0.2721750524rem;
  background: #fff;
  transform: translateX(63vw) translateZ(17vw);
  animation-duration: 4.68s;
  animation-delay: -0.3276s;
}

.top3-5 .emitter .particle:nth-child(16) {
  width: 0.5394954333rem;
  background: #35568e;
  transform: translateX(54vw) translateZ(19vw);
  animation-duration: 4.22s;
  animation-delay: -1.6036s;
}

.top3-5 .emitter .particle:nth-child(17) {
  width: 0.3904398465rem;
  background: #fff;
  transform: translateX(62vw) translateZ(23vw);
  animation-duration: 4.01s;
  animation-delay: -3.4486s;
}

.top3-5 .emitter .particle:nth-child(18) {
  width: 0.9239601303rem;
  background: #35568e;
  transform: translateX(74vw) translateZ(25vw);
  animation-duration: 4.45s;
  animation-delay: -4.1385s;
}

.top3-5 .emitter .particle:nth-child(19) {
  width: 0.760786364rem;
  background: #35568e;
  transform: translateX(62vw) translateZ(38vw);
  animation-duration: 4.53s;
  animation-delay: -0.4077s;
}

.top3-5 .emitter .particle:nth-child(20) {
  width: 0.2176306674rem;
  background: #fff;
  transform: translateX(48vw) translateZ(5vw);
  animation-duration: 4.36s;
  animation-delay: -1.1336s;
}

.top3-5 .emitter .particle:nth-child(21) {
  width: 0.7650432602rem;
  background: #fff;
  transform: translateX(30vw) translateZ(10vw);
  animation-duration: 4.68s;
  animation-delay: -1.9188s;
}

.top3-5 .emitter .particle:nth-child(22) {
  width: 0.7892159781rem;
  background: #fff;
  transform: translateX(91vw) translateZ(9vw);
  animation-duration: 4.53s;
  animation-delay: -0.9966s;
}

.top3-5 .emitter .particle:nth-child(23) {
  width: 0.1993849099rem;
  background: #35568e;
  transform: translateX(68vw) translateZ(42vw);
  animation-duration: 4.16s;
  animation-delay: -4.1184s;
}

.top3-5 .emitter .particle:nth-child(24) {
  width: 0.1556318708rem;
  background: #35568e;
  transform: translateX(58vw) translateZ(30vw);
  animation-duration: 4.76s;
  animation-delay: -0.3332s;
}

.top3-5 .emitter .particle:nth-child(25) {
  width: 0.5786692905rem;
  background: #35568e;
  transform: translateX(23vw) translateZ(2vw);
  animation-duration: 4.79s;
  animation-delay: -2.3471s;
}

.top3-5 .emitter .particle:nth-child(26) {
  width: 0.3745954781rem;
  background: #35568e;
  transform: translateX(75vw) translateZ(24vw);
  animation-duration: 4.01s;
  animation-delay: -0.0802s;
}

.top3-5 .emitter .particle:nth-child(27) {
  width: 0.0674139109rem;
  background: #fff;
  transform: translateX(64vw) translateZ(18vw);
  animation-duration: 5s;
  animation-delay: -2.25s;
}

.top3-5 .emitter .particle:nth-child(28) {
  width: 0.2305761038rem;
  background: #35568e;
  transform: translateX(1vw) translateZ(49vw);
  animation-duration: 4.37s;
  animation-delay: -3.8019s;
}

.top3-5 .emitter .particle:nth-child(29) {
  width: 0.4692434124rem;
  background: #fff;
  transform: translateX(9vw) translateZ(6vw);
  animation-duration: 4.45s;
  animation-delay: -3.5155s;
}

.top3-5 .emitter .particle:nth-child(30) {
  width: 0.2306169393rem;
  background: #35568e;
  transform: translateX(95vw) translateZ(13vw);
  animation-duration: 4.42s;
  animation-delay: -3.6244s;
}

@keyframes spin {
  from {
    rotate: 0 1 0 0deg;
  }

  to {
    rotate: 0 1 0 360deg;
  }
}

@keyframes jump {
  from {
    translate: 0px 0vh;
  }

  to {
    translate: 0px -5vh;
  }
}

@keyframes dipLeft {
  from {
    translate: 0vh 0vh;
  }

  to {
    translate: -8vh 5vh;
  }
}

@keyframes dipRight {
  from {
    translate: 0vh 0vh;
  }

  to {
    translate: 8vh 5vh;
  }
}

@keyframes sheen {
  100% {
    background-position: 0% 0%;
  }
}

@keyframes sheen2 {
  100% {
    background-position: 0% 300%;
  }
}

@keyframes flapLeft {
  100% {
    transform: rotateY(85deg);
  }
}

@keyframes flapRight {
  100% {
    transform: rotateY(-85deg);
  }
}

@keyframes naviFlight {

  0%,
  100% {
    translate: 0 0 0;
  }

  33.3% {
    translate: 20vw 0px -50vw;
  }

  66.6% {
    translate: 35vw 0px 25vw;
  }

  74.9% {
    z-index: 0;
  }

  75% {
    z-index: 10;
  }
}

@keyframes wingTurn {

  0%,
  100% {
    transform: rotateX(15deg) rotateY(-85deg);
    z-index: 10;
  }

  33.3% {
    transform: rotateX(15deg) rotateY(-25deg);
    z-index: 0;
  }

  66.6% {
    transform: rotateX(15deg) rotateY(-25deg);
  }

  74.9% {
    transform: rotateX(15deg) rotateY(85deg);
    z-index: 0;
  }

  95% {
    z-index: 10;
  }
}

@keyframes pFloatUp {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 0 -100vh;
  }
}