@charset "UTF-8";
/* CSS Document */


* {box-sizing: border-box;}
body { margin: 0;}

main {
    background-color: #451b2d;
    text-align: center;
}

.bgc {
    background-color: #B5005F;
    max-width: 700px;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.3));
}
/* -------- FV -------- */

.fv {
    position: relative;
    margin-bottom: -1%;
}

.fv_img1 {
    position: absolute;
    top: 0;
    left: 0;
}

.fv_img2 {
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transform: translateY(15px) scale(0.96);

    animation: bubbleFadeIn 1.5s ease-out 0.6s both;
}


/* FVバブル */

@keyframes bubbleFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* -------- con0 -------- */

.con0 {
    position: relative;
    margin-bottom: -2%;
}

.con0_img1 {
    position: absolute;
    top: 0;
    left: 0;
}

.con0_img2 {
    position: absolute;
    top: 0;
    left: 0;
}

/* con0のバブル */
.con0_img2.sa {
    transition:
        opacity 1.3s ease-out,
        transform 1.3s ease-out;
}

.con0_img2.sa-up {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
}

.con0_img2.sa.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* -------- offer -------- */ 

.offer {
   position:relative;
}

.offer_bg {
   margin-top: -1%;
   margin-bottom: -1%;
}

.offer_img1 {
   position: absolute;
   top:16%;
   left: 0;
}

.offer_img1_1 {
   position: absolute;
   top:50%;
   left: 0;
}

.offer_img3 {
   position: absolute;
   top:76.1%;
   left: 0;
}

.offer_btn {
   position: absolute;
   top:22.5%;
   left: 0;
}

.offer_btn2 {
   position: absolute;
   top:56.4%;
   left: 0;
}

.offer_btn3 {
   position: absolute;
   top:82%;
   left: 0;
}



.heartbeat {
	-webkit-animation: heartbeat 3s ease-in-out infinite both;
	        animation: heartbeat 3s ease-in-out infinite both;
}
/* 
 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   17% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   33% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 } */


 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   20% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   30% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 }



 /* -------- con1 -------- */

 .con1 {
    position: relative;
    margin-bottom:-2%;
 }


 .con1_img1 {
    position: absolute;
    top:0;
    left: 0;
 } 

 .con1_img2 {
    position: absolute;
    top:31%;
    left: 0;
 }

 .con1_img3 {
   position: absolute;
   top:50%;
   left: 0;
}

.con1_img4 {
   position: absolute;
   top:64%;
   left: 0;
}

.con1_img5 {
   position: absolute;
   top:64%;
   left: 0;
}

.con1_img6 {
   position: absolute;
   top:74%;
   left: 0;
}

.con1_img7 {
   position: absolute;
   top:88.5%;
   left: 0;
   transform: scale(0.65);
   transform-origin: center center;
}

/* showが付いた時に1回だけバーン */
.con1_img7.show {
   opacity: 1;
   animation: popBang .55s ease-out forwards;
}

@keyframes popBang {
   0% {
      opacity: 0;
      transform: scale(0.65);
   }
   65% {
      opacity: 1;
      transform: scale(1.08);
   }
   100% {
      opacity: 1;
      transform: scale(1);
   }
}
 /* -------- con2 -------- */

 .con2 {
   position: relative;
}

.con2_bg {
   margin-bottom: -1%;
}

.con2_img1 {
   position: absolute;
   top: 0;
   left: 0;
} 

.con2_img2 {
   position: absolute;
   top: 21%;
   left: 0;
}

.con2_img2.show {
  transition-delay: 0.2s;
}

.con2_img3 {
   position: absolute;
   top: 40%;
   left: 0;
}

.con2_img4 {
   position: absolute;
   top: 50%;
   left: 0;
}


 /* -------- con3 -------- */
 
 .con3 {
   position: relative;
}

.con3_bg {
   margin-bottom: 5%;
}


.con3_img2 {
   position: absolute;
   top: 63%;
   left: 0;
} 

.con3_img3 {
   position: absolute;
   top: 40%;
   left: 0;
} 

.con3_img1 {
   position: absolute;
   top: 15.5%;
   left: 0;
   transform: scale(0.65);
   transform-origin: center center;
}

/* showが付いた時に1回だけバーン */
.con3_img1.show {
   opacity: 1;
   animation: popBang .55s ease-out forwards;
}
 /* -------- con4 -------- */
 
 .con4 {
   position: relative;
}

.con4_bg {
   margin-bottom: -1%;
}

.con4_img1 {
   position: absolute;
   top: 36%;
   left: 0;
} 

.con4_img2 {
   position: absolute;
   top: 83%;
   left: 0;
} 



 /* -------- con5 -------- */
 
 .con5 {
   position: relative;
}

.con5_bg {
   margin-bottom: -1%;
}

.con5_img1 {
   position: absolute;
   top: 13%;
   left: 0;
   transform: scale(0.65);
   transform-origin: center center;
}

/* showが付いた時に1回だけバーン */
.con5_img1.show {
   opacity: 1;
   animation: popBang .55s ease-out forwards;
}

/* -------- con6 -------- */

 .con6 {
   position: relative;
}

.con6_bg {
   margin-bottom: 5%;
}

.con6_img1 {
   position: absolute;
   top: 13%;
   left: 0;
} 

.con6_img2 {
   position: absolute;
   top: 25%;
   left: 0;
}

.con6_img3 {
   position: absolute;
   top: 55%;
   left: 0;
}

.con6_img4 {
   position: absolute;
   top: 67%;
   left: 0;
}

/* -------- con7 -------- */

 .con7 {
   position: relative;
}

.con7_bg {
   margin-bottom: 5%;
}

.con7_img1 {
   position: absolute;
   top: 7%;
   left: 0;
} 


.con7_img2 {
   position: absolute;
   top: 42%;
   left: 2%;
   transform: scale(0.1);
   transform-origin: center center;
}

/* showが付いた時に1回だけバーン */
.con7_img2.show {
   opacity: 1;
   animation: popBang .50s ease-out forwards;
}


.con7_img3 {
   position: absolute;
   top: 7%;
   left: 0;
}

.con7_img4 {
   position: absolute;
   top: 40%;
   left: 0;
}


/* -------- con8 -------- */

 .con8 {
   position: relative;
}

.con8_bg {
   margin-bottom: -1%;
}

.con8_img1 {
   position: absolute;
   top: 45%;
   left: 0;
}

.con8_img2 {
   position: absolute;
   top: 65%;
   left: 0;
}

/* -------- con9 -------- */

 .con9 {
   position: relative;
}

.con9_bg {
   margin-bottom: -1%;
}

.con9_img1 {
   position: absolute;
   top: 18%;
   left: 0;
}

.con9_img2 {
   position: absolute;
   top: 38%;
   left: 0;
}

.con9_img3 {
   position: absolute;
   top: 53%;
   left: 0;
}

.con9_img4 {
   position: absolute;
   top: 73%;
   left: 0;
}



/* ---------------- SP ---------------- */
   
@media (max-width: 700px) {

   .bgc {
      width: 100%;
      max-width: 750px;
      margin:0 auto;
      filter: unset!important;
   }

   main{
      padding: 0!important;
   }

summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
      display: none;
  }
summary {
      list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */
  }
   
}