@charset "shift_jis";
/* CSS Document */

.MB1em {
  margin-bottom: 1em !important;
}
.MB00 {
  margin-bottom: 0px !important;
}
.MB10 {
  margin-bottom: 10px !important;
}
.MB15 {
  margin-bottom: 15px !important;
}
.MB20 {
  margin-bottom: 20px !important;
}
.MB25 {
  margin-bottom: 25px !important;
}
.MB30 {
  margin-bottom: 30px !important;
}
.MB35 {
  margin-bottom: 35px !important;
}
.MB40 {
  margin-bottom: 40px !important;
}
.MB45 {
  margin-bottom: 45px !important;
}
.MB50 {
  margin-bottom: 50px !important;
}
.MB55 {
  margin-bottom: 55px !important;
}
.MB60 {
  margin-bottom: 60px !important;
}
.MB65 {
  margin-bottom: 55px !important;
}
.MB60 {
  margin-bottom: 60px !important;
}
.MB65 {
  margin-bottom: 65px !important;
}
.MB70 {
  margin-bottom: 70px !important;
}
.MB75 {
  margin-bottom: 75px !important;
}
.MB80 {
  margin-bottom: 80px !important;
}
.MB85 {
  margin-bottom: 85px !important;
}
.MB90 {
  margin-bottom: 90px !important;
}
.MB95 {
  margin-bottom: 95px !important;
}
.MB100 {
  margin-bottom: 100px !important;
}
.MB110 {
  margin-bottom: 110px !important;
}
.MB120 {
  margin-bottom: 120px !important;
}
.MB130 {
  margin-bottom: 130px !important;
}
.MB140 {
  margin-bottom: 140px !important;
}
.MB150 {
  margin-bottom: 150px !important;
}
.MB160 {
  margin-bottom: 160px !important;
}
.MB200 {
  margin-bottom: 200px !important;
}

.w100 {
  display: block;
  width: 100%;
  height: auto;
}

.price_box {
  background: #aacd06;
  padding: 20px;
}

.price_box .price_inbox {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  max-width: 980px;
  width: 83%;
  margin: 0 auto;
}
.price_box .price_txt {
  max-width: 400px;
  width: 100%;
}

.btn_buy {
  width: 180px;
}

.btn_mall .btn {
  display: inline-block;
  font-weight: bold;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 2px solid transparent;
  padding: 0.375rem 2rem;
  font-size: 18px;
  width: 180px;
  border-radius: 6px;
}
.btn_mall .btn.btn-light {
  display: block;
  color: #fff;
  background-color: #014099;
  border-color: #014099;
}

.btn_mall.btn_mall02 .btn.btn-light {
  display: block;
  color: #fff;
  background-color: #014099;
  border-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

.btn_mall02 {
  display: flex;
  justify-content: center;
  margin-bottom: 3%;
}

.btn_mall_box {
  width: 180px;
  margin: 0 auto;
}
.btn_mall_box .btn_mall .btn.btn-light {
  display: block;
  color: #fff;
  background-color: #e60012;
  border-color: #e60012;
}

.btn_mall01_ch{
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 500;
}

.movie_area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.movie_area {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.promo_movie_box {
  width: 90%;
  max-width: 480px;
  margin: 0 auto;
}

#contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.ct_box .copyright {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;

  align-items: center;

  padding: 20px 10px;
}

.ct_box .copyright_img {
  width: 40%;
  max-width: 320px;
}

.ct_box .copyright_text {
  width: 55%;
  text-align: left;
  font-size: 11px;
  color: #000;
}

.ct_box .bnr_box {
  padding: 20px 8% 10px;
}
.ct_box .bnr_box a {
  display: block;
}

/*------------------------*/

.ct_box {
  width: 100%;
  margin: 0 auto;
}

.ct_box > .w480 {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  background: url(../images/bg.png) top center;
background-size: 100% auto;
}

@media (min-width: 481px) {
  .ct_box > .w480 {
    border-right: 4px #e60f1e solid;
    border-left: 4px #e60f1e solid;
  }
  /* min-width: 481px */
}

.bg_box {
  background: url(../images/bg_pc.png);
}
/*------------------------*/


/* mainここから */
/*------------------------*/


/* アニメーション用 */
.slid_in_left {
  opacity: 0;
}
.animate_slid_in_left {
  animation: slid_in_left 0.3s ease forwards;
}
@keyframes slid_in_left {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slid_in_right {
  opacity: 0;
}
.animate_slid_in_right {
  animation: slid_in_right 0.6s ease forwards;
}
@keyframes slid_in_right {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slid_in_down {
  opacity: 0;
}
.animate_slid_in_down {
  animation: slid_in_down 0.6s ease forwards;
}
@keyframes slid_in_down {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slid_in_down_delay {
  opacity: 0;
}
.animate_slid_in_down_delay {
  animation: slid_in_down 0.6s ease forwards;
  animation-delay: 0.3s;
}

.slid_in_up {
  opacity: 0;
}
.animate_slid_in_up {
  animation: slid_in_up 0.5s ease forwards;
  animation-delay: 1s;
}
@keyframes slid_in_up {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slid_in_up_delay {
  opacity: 0;
}
.animate_slid_in_up_delay {
  animation: slid_in_up 0.5s ease forwards;
  animation-delay: 1.2s;
}

.slid_in_up_delay2 {
  opacity: 0;
}
.animate_slid_in_up_delay2 {
  animation: slid_in_up 0.5s ease forwards;
  animation-delay: 1.4s;
}


.scale_up {
  opacity: 0;
}
.animate_scale_up {
  animation: scale_up 0.5s ease forwards;
}
@keyframes scale_up {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.scale_up_delay {
  opacity: 0;
}
.animate_scale_up_delay {
  animation: scale_up_delay 0.5s ease forwards;
  animation-delay: 0.6s;
}
@keyframes scale_up_delay {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.scale_up_delay2 {
  opacity: 0;
}
.animate_scale_up_delay2 {
  animation: scale_up_delay 1s ease forwards;
  animation-delay: 0.9s;
}
@keyframes scale_up_delay {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fade_in {
  opacity: 0;
}
.animate_fade_in {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 0.2s;
}
@keyframes fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade_in_delay {
  opacity: 0;
}
.animate_fade_in_delay {
  animation: fade_in_delay 0.5s ease forwards;
  animation-delay: 1s;
}
@keyframes fade_in_delay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade_in_delay2 {
  opacity: 0;
}
.animate_fade_in_delay2 {
  animation: fade_in_delay2 0.5s ease forwards;
  animation-delay: 0.4s;
}
@keyframes fade_in_delay2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/*- main -------------------------------------*/

#contents .main_bg {
background: #fff;
padding-bottom: 20px;
}

#contents .main_box {
position: relative;
overflow: hidden;
}

#contents .main_box .copy_txt {
position: absolute;
left: 7.71%; top: 4.47%; width: 63.13%; height: 21.1%;
z-index: 15;
}

#contents .main_box .pikachu {
position: absolute;
left: 68.54%; top: 7.49%; width: 30%; height: 18.51%;
z-index: 16;
}

#contents .main_box .bg_capsule {
position: absolute;
left: 1.67%; top: 25.88%; width: 22.71%; height: 28.21%;
z-index: 10;
}

#contents .main_box .bg_moncolle {
position: absolute;
left: 0.94%; top: 51.01%; width: 20.94%; height: 18.51%;
z-index: 11;
}

#contents .main_box .bg_medal01 {
position: absolute;
left: 62.5%; top: 69.33%; width: 40%; height: 14.86%;
z-index: 12;
}

#contents .main_box .bg_medal02 {
position: absolute;
left: 77.4%; top: 46.31%; width: 27.5%; height: 22.04%;
z-index: 13;
}

#contents .main_box .bg_medal03 {
position: absolute;
left: 73.02%; top: 65.3%; width: 29%; height: 12.91%;
z-index: 14;
}

#contents .main_box .gacha_logo {
position: absolute;
left: 5.94%; top: 75.63%; width: 87.92%; height: 11.71%;
z-index: 31;
opacity: 0;
}
.animate_gacha_logo {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 1.5s;
}


#contents .main_box .capsule {
position: absolute;
left: 1.46%; top: 66.75%; width: 23.65%; height: 14.23%;
z-index: 21;
opacity: 0;
transform-origin: center center;
}
.animate_capsule {
animation: animate_capsule 5s infinite;
}
@keyframes animate_capsule {

  0% {
    opacity: 0;

    transform:
      translate(110%, -70%)
      scale(0.70)
      rotate(-240deg);
  }

  15% {
    opacity: 1;

    transform:
      translate(105%, -50%)
      scale(0.8)
      rotate(-360deg);
     animation-timing-function: ease-in;
  }

  25% {
    opacity: 1;

    transform:
      translate(60%, -20%)
      scale(0.90)
      rotate(-540deg);
    animation-timing-function: ease-out;
  }

  40% {
    opacity: 1;

    transform:
      translate(0, 0)
      scale(1)
      rotate(-720deg);
  }

  75% {
    opacity: 1;

    transform:
      translate(0, 0)
      scale(1)
      rotate(-720deg);
     animation-timing-function: ease-in;
  }

  100% {
    opacity: 1;

    transform:
      translate(-20vw, 0)
      scale(1)
      rotate(-1200deg);
  }
}



#contents .main_box .blink {
position: absolute;
left: 29.79%; top: 40.81%; width: 18.13%; height: 5.79%;
z-index: 22;
opacity: 0;
}
.animate_blink {
  animation: animate_blink 1s ease  infinite;
}
@keyframes animate_blink {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}


#contents .main_box .cation {
position: absolute;
left: 8.33%; top: 88.54%; width: 83.33%; height: 11.46%;
z-index: 17;
}




/*- sec01_howto01 ----------------------------------*/

#contents .sec01_howto01 {
position: relative;
overflow: hidden;
opacity: 0;
}
#contents .animate_sec01_howto01 {
position: relative;
overflow: hidden;
animation: howto_slidedown 0.6s ease forwards;
}
@keyframes howto_slidedown {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


#contents .sec01_howto01 .howto01_coin {
position: absolute;
left: 46.15%; top: 31.84%; width: 11.77%; height: 16.48%;
z-index: 11;
}
#contents .sec01_howto01 .animate_howto01_coin {
  animation-delay: 0.2s;
  animation: animate_howto01_coin 3s ease infinite;
  opacity: 0;
}
@keyframes animate_howto01_coin {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  90% {
    transform: translateY(200%);
    opacity: 1;
  }
  100% {
    transform: translateY(200%);
    opacity: 1;
  }
}



#contents .sec01_howto01 .howto01_coinarrow {
position: absolute;
left: 46.77%; top: 8%; width: 10%; height: 20.81%;
z-index: 12;
opacity: 0;
}
#contents .sec01_howto01 .animate_howto01_coinarrow {
  animation-delay: 0.2s;
  animation: animate_howto01_coinarrow 3s ease infinite;
}

@keyframes animate_howto01_coinarrow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(100%);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

#contents .sec01_howto01 .howto01_mask {
position: absolute;
left: 23.75%; top: 49.72%; width: 50.73%; height: 29.33%;
z-index: 13;
}



/*- sec01_howto02 ----------------------------------*/

#contents .sec01_howto01 .howto02_handle {
position: absolute;
left: 29.58%; top: 8.23%; width: 41.77%; height: 55.93%;
z-index: 11;
}
#contents .sec01_howto01 .animate_howto02_handle {
  animation-delay: 0.2s;
  animation: animate_howto02_handle 3s ease infinite;
}
@keyframes animate_howto02_handle {
  0% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




/*- sec01_howto03 ----------------------------------*/

#contents .sec01_howto03 .howto03_txt {
position: absolute;
z-index: 20;
}

#contents .sec01_howto03 .howto03_capsule_box {
position: absolute;
left: 17.08%; width: 66.04%; height: 100%;
overflow: hidden;
}

#contents .sec01_howto03 .howto03_capsule {
position: absolute;
left: 19.24%; top: 29.76%; width: 62.15%; height: 63.2%;
opacity: 0;
z-index: 11;
}

#contents .sec01_howto03.is-animate .howto03_capsule {
animation: animate_howto03_capsule 6s infinite;
}
@keyframes animate_howto03_capsule {

  0% {
    opacity: 0;

    transform:
      translate(50%, -50%)
      scale(0.80)
      rotate(-240deg);
  }

  10% {
    opacity: 1;

    transform:
      translate(50%, -20%)
      scale(0.8)
      rotate(-360deg);
     animation-timing-function: ease-in;
  }

  20% {
    opacity: 1;

    transform:
      translate(30%, -10%)
      scale(0.85)
      rotate(-540deg);
    animation-timing-function: ease-out;
  }

  35% {
    opacity: 1;

    transform:
      translate(0, 0)
      scale(1)
      rotate(-720deg);
  }

  60% {
    opacity: 1;

    transform:
      translate(0, 0)
      scale(1)
      rotate(-720deg);
     animation-timing-function: ease-in;
  }

  90% {
    opacity: 1;

    transform:
      translate(-30vw, 0)
      scale(1)
      rotate(-1200deg);
  }

  100% {
    opacity: 1;

    transform:
      translate(-30vw, 0)
      scale(1)
      rotate(-1200deg);
  }
}

#contents .sec01_howto03 .howto03_blink {
position: absolute;
left: 19.06%; top: 28.96%; width: 23.54%; height: 36.96%;
opacity: 0;
z-index: 12;
}

#contents .sec01_howto03.is-animate .howto03_blink {
animation: animate_howto03_blink 6s ease-in-out infinite;
}
@keyframes animate_howto03_blink {

  0% {
    opacity: 0;
    transform:scale(1);
  }
  30% {
    opacity: 0;
    transform:scale(1);
  }
  35% {
    opacity: 1;
    transform: scale(1.2);
  }
  40% {
    opacity: 1;
    transform:scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
    transform:scale(1);
  }
  55% {
    opacity: 1;
    transform: scale(1.2);
  }
  60% {
    opacity: 1;
    transform:scale(1);
  }
  65% {
    opacity: 0;
    transform: scale(1.2);
  }

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



/*- sec02_arrange ----------------------------------*/

#contents .sec02_arrange01 {
position: relative;
overflow: hidden;
opacity: 0;
}
#contents .animate_sec02_arrange01 {
position: relative;
overflow: hidden;
animation: howto_slideUP 0.6s ease forwards;
}
@keyframes howto_slideUP {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

#contents .sec02_arrange01 .arrange01_capsule {
position: absolute;
left: 16.46%; top: 44.54%; width: 17.6%; height: 12.23%;
opacity: 0;
z-index: 11;
}
#contents .animate_sec02_arrange01 .arrange01_capsule {
  animation: fade_in_delay 0.5s ease forwards;
  animation-delay: 1s;
}

#contents .sec02_arrange01 .arrange01_blink {
position: absolute;
left: 11.98%; top: 44.54%; width: 26.46%; height: 12.88%;
opacity: 0;
z-index: 12;
}
#contents .animate_sec02_arrange01 .arrange01_blink {
  animation: animate_blink 1s ease  infinite;
  animation-delay: 1s;
}


#contents .sec02_arrange01 .arrange01_moncole00 {
position: absolute;
left: 25.42%; top: 69.14%; width: 44.38%; height: 20.01%;
opacity: 0;
z-index: 25;
}
#contents .animate_sec02_arrange01 .arrange01_moncole00 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 1.8s;
}

#contents .sec02_arrange01 .arrange01_moncole01 {
position: absolute;
left: 16.67%; top: 63.39%; width: 15.31%; height: 13.17%;
opacity: 0;
z-index: 22;
}
#contents .animate_sec02_arrange01 .arrange01_moncole01 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 1.9s;
}

#contents .sec02_arrange01 .arrange01_moncole02 {
position: absolute;
left: 31.35%; top: 57.79%; width: 15.21%; height: 11.43%;
opacity: 0;
z-index: 21;
}
#contents .animate_sec02_arrange01 .arrange01_moncole02 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2s;
}

#contents .sec02_arrange01 .arrange01_moncole03 {
position: absolute;
left: 44.69%; top: 62.66%; width: 16.04%; height: 10.99%;
opacity: 0;
z-index: 23;
}
#contents .animate_sec02_arrange01 .arrange01_moncole03 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.1s;
}

#contents .sec02_arrange01 .arrange01_moncole04 {
position: absolute;
left: 60.83%; top: 58.88%; width: 18.13%; height: 11.86%;
opacity: 0;
z-index: 23;
}
#contents .animate_sec02_arrange01 .arrange01_moncole04 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.2s;
}

#contents .sec02_arrange01 .arrange01_moncole05 {
position: absolute;
left: 70.21%; top: 71.18%; width: 11.98%; height: 10.7%;
opacity: 0;
z-index: 26;
}
#contents .animate_sec02_arrange01 .arrange01_moncole05 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.3s;
}

#contents .sec02_arrange01 .arrange01_moncole06 {
position: absolute;
left: 67.29%; top: 83.84%; width: 10%; height: 10.26%;
opacity: 0;
z-index: 27;
}
#contents .animate_sec02_arrange01 .arrange01_moncole06 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.4s;
}

#contents .sec02_arrange01 .arrange01_moncole07 {
position: absolute;
left: 49.79%; top: 87.41%; width: 13.65%; height: 9.53%;
opacity: 0;
z-index: 30;
}
#contents .animate_sec02_arrange01 .arrange01_moncole07 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.5s;
}

#contents .sec02_arrange01 .arrange01_moncole08 {
position: absolute;
left: 35.73%; top: 84.64%; width: 12.4%; height: 12.08%;
opacity: 0;
z-index: 29;
}
#contents .animate_sec02_arrange01 .arrange01_moncole08 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.6s;
}

#contents .sec02_arrange01 .arrange01_moncole09 {
position: absolute;
left: 19.27%; top: 81.3%; width: 16.88%; height: 13.1%;
opacity: 0;
z-index: 28;
}
#contents .animate_sec02_arrange01 .arrange01_moncole09 {
  animation: fade_in 0.5s ease forwards;
  animation-delay: 2.7s;
}






/*- sec02_arrange02 ----------------------------------*/

#contents .sec02_arrange02 {
position: relative;
overflow: hidden;
opacity: 0;
}
#contents .animate_sec02_arrange02 {
position: relative;
overflow: hidden;
animation: howto_slideUP 0.6s ease-in-out forwards;
}


@keyframes arrange02_slideUP {
  0% {
    transform:
      translateY(40px)
      scale(1.1);
    opacity: 0;
  }
  70% {
    transform:
      translateY(-10px)
      scale(1.1);
  }
  100% {
    transform:
      translateY(0)
      scale(1);
    opacity: 1;
  }
}

#contents .arrange02_capsule {
position: absolute;
left: 30.31%; top: 34.79%; width: 19.9%; height: 32.45%;
z-index: 20;
}

#contents .arrange02_medal01 {
position: absolute;
left: 17.08%; top: 42.28%; width: 13.75%; height: 20.59%;
z-index: 18;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_medal01 {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 0.5s;
}

#contents .arrange02_medal02 {
position: absolute;
left: 26.77%; top: 22%; width: 13.75%; height: 20.59%;
z-index: 15;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_medal02 {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 0.7s;
}

#contents .arrange02_medal03 {
position: absolute;
left: 50.42%; top: 54.6%; width: 13.65%; height: 20.59%;
z-index: 21;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_medal03 {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 0.9s;
}

#contents .arrange02_medal04 {
position: absolute;
left: 70.83%; top: 58.03%; width: 13.75%; height: 20.59%;
z-index: 22;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_medal04 {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 1.1s;
}

#contents .arrange02_medal05 {
position: absolute;
left: 65.42%; top: 71.92%; width: 13.75%; height: 20.59%;
z-index: 23;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_medal05 {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 1.3s;
}


#contents .arrange02_copy {
position: absolute;
left: 9.48%; top: 69.11%; width: 48.02%; height: 30.89%;
z-index: 25;
opacity: 0;
}
#contents .animate_sec02_arrange02 .arrange02_copy {
  animation: arrange02_slideUP 0.5s ease forwards;
  animation-delay: 1.5s;
}



/*- sec02_arrange03 ----------------------------------*/

#contents .sec02_arrange03 {
position: relative;
overflow: hidden;
opacity: 0;
}
#contents .animate_sec02_arrange03 {
position: relative;
overflow: hidden;
animation: howto_slideUP 0.6s ease-in-out forwards;
}



#contents .arrange03_01moncolle {
position: absolute;
left: 7.6%; top: 27.93%; width: 35.21%; height: 62.59%;
z-index: 11;
opacity: 0;
transform-origin: center center;
}
#contents .animate_sec02_arrange03 .arrange03_01moncolle {
  animation: arrange03_01moncolle 0.5s ease-in-out forwards;
  animation-delay: 1s;
}

@keyframes arrange03_01moncolle {
  0% {
    transform:
      rotate(10deg)
      translateX(10%)
      scale(1);
    opacity: 0;
  }
  70% {
    transform:
      rotate(-2deg)
      translateX(-2%)
      scale(1);
  }
  100% {
    transform:
      rotate(0)
      translateX(0)
      scale(1);
    opacity: 1;
  }
}


#contents .arrange03_02medal {
position: absolute;
left: 57.29%; top: 26.55%; width: 35.63%; height: 65%;
z-index: 12;
opacity: 0;
transform-origin: center center;
}
#contents .animate_sec02_arrange03 .arrange03_02medal {
  animation: arrange03_02medal 0.5s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes arrange03_02medal {
  0% {
    transform:
      rotate(-10deg)
      translateX(-10%)
      scale(1);
    opacity: 0;
  }
  70% {
    transform:
      rotate(2deg)
      translateX(2%)
      scale(1);
  }
  100% {
    transform:
      rotate(0)
      translateX(0)
      scale(1);
    opacity: 1;
  }
}



/*- sec02_arrange04 ----------------------------------*/

#contents .sec02_arrange04 {
position: relative;
overflow: hidden;
opacity: 0;
}
#contents .animate_sec02_arrange04 {
position: relative;
overflow: hidden;
animation: howto_slideUP 0.6s ease-in-out forwards;
}


#contents .arrange04_blink {
position: absolute;
left: 60.31%; top: 25.06%; width: 21.46%; height: 25.06%;
z-index: 11;
opacity: 0;
}
#contents .animate_sec02_arrange04 .arrange04_blink {
  animation: arrange04_blink 1s ease-in-out infinite;
}

@keyframes arrange04_blink{
  0% {
    opacity: 0;
    /* transform: scale(1); */
  }
  20% {
    opacity: 0;
    /* transform: scale(1); */
  }
  25% {
    opacity: 1;
    transform: scale(1.1);
  }
  75% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    /* transform: scale(1.3); */
  }
}


#contents a.bnr_moncolle {
display: block;
width: 90%;
margin: 0 auto 20px;
}

#contents .moncolle_ttl {
display: block;
padding: 6px 10px 4px;
color:#fff;
font-weight: bold;
font-size: 24px;
text-align: center;
background: #004ea2;
}