body {
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.result_header {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  padding: 0 0 30px;
  background-image: url(../img/common/line.png);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: 30px auto;
  border-top: #d14a4a solid 30px;
}

.result_inner {
  position: relative;
  width: 90%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 0 10rem;
  z-index: 3;
}

.result_image {
  width: 80%;
  margin: 0 auto 7rem;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff;
  line-height: 0;
}

.zoom {
  animation-name: zoom;
  animation-duration: .5s;
  animation-delay: .6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes zoom {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0;
  }

  100% {
    transform: rotate(-8deg) scale(1);
    opacity: 1;
  }
}

.button_share {
  position: relative;
  width: 220px;
  margin: 3rem auto 0;
  z-index: 3;
}

.button_share a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  font-family: "fot-udkakugoc80-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #d14a4a;
  font-size: 18px;
  text-decoration: none;
  border-radius: 200px;
  border: #d14a4a solid 2px;
  transition: all 0.3s;
}

.ft_outer {
  position: absolute;/*←絶対位置*/
  bottom: 0; /*下に固定*/
  width: 100%;
  padding: 30px 0 0;
  background-image: url(../img/common/line.png);
  background-position: top center;
  background-repeat: repeat-x;
  background-size: 30px auto;
}

.kira {
  position: absolute;
  width: 50px; /* キラのサイズを調整 */
  height: 50px;
  /* 必要に応じてアニメーションやその他のスタイルを追加 */
}

.kira img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 各.kira要素の位置を個別に指定 */
.kira-1 { top: 10%; left: 10%; }
.kira-2 { top: 12%; left: 25%; }
.kira-3 { top: 30%; left: 5%; }
.kira-4 { top: 40%; left: 20%; }
.kira-5 { top: 10%; left: 45%; }
.kira-6 { top: 60%; left: 30%; }
.kira-7 { top: 70%; left: 20%; }
.kira-8 { top: 80%; left: 75%; }
.kira-9 { top: 15%; left: 85%; }
.kira-10 { top: 35%; left: 80%; }
.kira-11 { top: 45%; left: 70%; }
.kira-12 { top: 55%; left: 90%; }
.kira-13 { top: 65%; left: 70%; }
.kira-14 { top: 75%; left: 50%; }
.kira-15 { top: 85%; left: 60%; }

.kira-anime-1 {
  animation: kira-anime-1 .4s infinite linear;
}

@keyframes kira-anime-1 {
  0% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(0.2);
  }

  100% {
    transform: scale(1.3);
  }
}

.kira-anime-2 {
  animation: kira-anime-2 .4s infinite linear;
}

@keyframes kira-anime-2 {
  0% {
    transform: scale(0.2);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(0.2);
  }
}

@media screen and (min-width: 1px) and (max-width: 750px) {
  .result_bg {
    height: 100dvh;
    background-image: url(../img/common/sp_bg_3.png),url(../img/common/bg.png);
    background-position: top 18rem left, center;
    background-repeat: repeat-y, repeat;
    background-size: 100% auto, 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .result_header {
    height: 25px;
    padding: 0 0 25px;
    background-size: 25px auto;
    border-top: #d14a4a solid 30px;
  }
  
  .result_inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 15%;
  }
  
  .result_image {
    width: 100%;
    margin: 0 auto 4rem;
  }
  
  .button_share {
    width: 60%;
    margin: 2rem auto 0;
  }
  
  .button_share a {
    padding: 1rem 0;
    font-size: 4.5vw;;
  }
  
  .ft_outer {
    padding: 25px 0 0;
    background-size: 25px auto;
  }
  
  .kira {
    width: 8%;
  }
  
  /* 各.kira要素の位置を個別に指定 */
  .kira-1 { top: 10%; left: 10%; }
  .kira-2 { top: 12%; left: 25%; }
  .kira-3 { top: 30%; left: 5%; }
  .kira-4 { top: 40%; left: 20%; }
  .kira-5 { top: 10%; left: 45%; }
  .kira-6 { top: 60%; left: 30%; }
  .kira-7 { top: 70%; left: 20%; }
  .kira-8 { top: 80%; left: 75%; }
  .kira-9 { top: 15%; left: 85%; }
  .kira-10 { top: 35%; left: 80%; }
  .kira-11 { top: 45%; left: 70%; }
  .kira-12 { top: 55%; left: 90%; }
  .kira-13 { top: 65%; left: 70%; }
  .kira-14 { top: 75%; left: 50%; }
  .kira-15 { top: 85%; left: 60%; }
  
}

@media screen and (max-width: 750px) and (max-height: 550px) {
  .result_inner {
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 0 0 18%;
  }

  .result_image {
    width: 100%;
    margin: 0 auto 3rem;
  }

  .button {
    width: 90%;
  }

  .button a {
    padding: .8rem 0;
    font-size: 4.5vw;
  }
  
  .button_share {
    width: 70%;
    margin: 1.5rem auto 0;
  }

  .button_share a {
    padding: .6rem 0;
    font-size: 4vw;;
  }
}

@media screen and (min-width: 751px) and (max-width: 1024px) {
  .result_bg {
    height: 100vh;
    background-image: url(../img/common/bg_3_l.png),url(../img/common/bg_3_r.png),url(../img/common/bg.png);
    background-position: center left -10%, center right -10%, center;
    background-repeat: repeat-y, repeat-y, repeat;
    background-size: 40% auto, 40% auto, 70px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (min-width: 1025px) {
  .result_bg {
    height: 100vh;
    background-image: url(../img/common/bg_3_l.png),url(../img/common/bg_3_r.png),url(../img/common/bg.png);
    background-position: center left -10%, center right -10%, center;
    background-repeat: repeat-y, repeat-y, repeat;
    background-size: 40% auto, 40% auto, 70px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .button_share a:hover {
    background-color: #fff;
  }
}