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


/* animation動き
====================================================================================================================================== */
@keyframes anime_floating {
  0% {
    transform: translate(0, 0);
  }

  33.3333% {
    transform: translate(0, 6%);
  }

  66.6666% {
    transform: translate(0, -6%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes anime_dokidoki {

  0%,
  100% {
    transform: scale(0.9, 0.9);
  }

  33.3333% {
    transform: scale(1.1, 1.1);
  }
}

@keyframes anime_dokidoki_img {

  0%,
  100% {
    background-position: right 17px center;
    background-size: 34px auto;
  }

  50% {
    background-size: 38px auto;
    background-position: right 15px center;
  }
}

@keyframes kururi {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes kirakira {

  0%,
  to {
    transform: scale(1.3, 1.3);
  }

  50% {
    transform: scale(0.3, 0.3);
  }
}

@keyframes kirakira02 {

  0%,
  to {
    transform: scale(0.3, 0.3);
  }

  50% {
    transform: scale(1.3, 1.3);
  }
}

@keyframes ink {
  0% {
    top: -50vw;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 0.3;
  }
}

@keyframes ase {

  0%,
  50% {
    width: 5vw;
    transform: rotate(-45deg);
    opacity: 0;
  }

  to {
    width: 15vw;
    transform: rotate(0deg);
    opacity: 1;
  }
}

/* @keyframes key {
  0% { transform: scale(0); }
} */

@keyframes stamp_pon {

  /* 上からポンと押される（-10°傾けたまま） */
  0% {
    opacity: 0;
    transform: rotate(-10deg) scale(1.32) translateY(-5%);
  }

  60% {
    opacity: 1;
    transform: rotate(-10deg) scale(0.985) translateY(0);
  }

  80% {
    opacity: 1;
    transform: rotate(-10deg) scale(1.008);
  }

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

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

  100% {
    opacity: 1;
  }
}

@keyframes item_appear {

  /* 鍵と地図表示 */
  0% {
    opacity: 0;
    transform: scale(0) translate(-100%, 200%);
  }

  100% {
    opacity: 1;
    transform: scale(1) translate(100%, 6%);
  }
}

@keyframes message_appear {

  /* メッセージ表示 */
  0% {
    width: 0;
  }
}


/* animation設定
====================================================================================================================================== */
#conts .btn_answer {
  animation: 1s ease-in-out 1s infinite;
  animation-delay: 1s;
  animation-name: anime_dokidoki_img;
}

.coupon_btn:before {
  animation: 1.5s linear 1s infinite;
  animation-delay: 0s;
  animation-name: anime_floating;
}

/* 吹き出し：常に上下へふよふよ浮かぶ */
.fukidashi {
  animation: anime_floating 1s ease-in-out 0s infinite;
}

/* スコア表示の中と .no_anime 付きは動かさない */
.score_box .fukidashi,
.fukidashi.no_anime {
  animation: none;
}

li.challenge .img_box {
  transform: scale(0.9, 0.9);
  animation: 1s linear 0s infinite;
  animation-name: anime_dokidoki;
}

/* correct */
.img_correct .bg_img {
  animation: anime_opacity 0.2s linear forwards, kururi 10s linear infinite;
  animation-delay: 2s;
  opacity: 0;
}

/* key and map item */
.img_correct:not(.no_anime) .item_space {
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scale(0) translate(-100%, 200%);
  animation: item_appear 1s ease-out 0.5s both;
}

/* 放射状の光：スタンプが押されるのと同時にフェードイン → そのままゆっくり時計回り */
.item_wrap .img_correct:before {
  opacity: 0;
  animation: anime_opacity 0.3s linear 0.35s both, kururi 50s linear 0s infinite;
}

/* スタンプ */
.img_correct:not(.no_anime) .stamp_pon {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: stamp_pon 0.5s cubic-bezier(.25, .8, .35, 1) 0.35s both;
}

/* スタンプ帳のクリア済みスタンプ */
.spot_list li.clear .stamp_box img {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: stamp_pon 0.4s cubic-bezier(.25, .8, .35, 1) both;
}

/* 1番から20番までシュババッと順番に押されていく */
.spot_list li:nth-child(1).clear .stamp_box img {
  animation-delay: 0.30s;
}

.spot_list li:nth-child(2).clear .stamp_box img {
  animation-delay: 0.35s;
}

.spot_list li:nth-child(3).clear .stamp_box img {
  animation-delay: 0.40s;
}

.spot_list li:nth-child(4).clear .stamp_box img {
  animation-delay: 0.45s;
}

.spot_list li:nth-child(5).clear .stamp_box img {
  animation-delay: 0.50s;
}

.spot_list li:nth-child(6).clear .stamp_box img {
  animation-delay: 0.55s;
}

.spot_list li:nth-child(7).clear .stamp_box img {
  animation-delay: 0.60s;
}

.spot_list li:nth-child(8).clear .stamp_box img {
  animation-delay: 0.65s;
}

.spot_list li:nth-child(9).clear .stamp_box img {
  animation-delay: 0.70s;
}

.spot_list li:nth-child(10).clear .stamp_box img {
  animation-delay: 0.75s;
}

.spot_list li:nth-child(11).clear .stamp_box img {
  animation-delay: 0.80s;
}

.spot_list li:nth-child(12).clear .stamp_box img {
  animation-delay: 0.85s;
}

.spot_list li:nth-child(13).clear .stamp_box img {
  animation-delay: 0.90s;
}

.spot_list li:nth-child(14).clear .stamp_box img {
  animation-delay: 0.95s;
}

.spot_list li:nth-child(15).clear .stamp_box img {
  animation-delay: 1.00s;
}

.spot_list li:nth-child(16).clear .stamp_box img {
  animation-delay: 1.05s;
}

.spot_list li:nth-child(17).clear .stamp_box img {
  animation-delay: 1.10s;
}

.spot_list li:nth-child(18).clear .stamp_box img {
  animation-delay: 1.15s;
}

.spot_list li:nth-child(19).clear .stamp_box img {
  animation-delay: 1.20s;
}

.spot_list li:nth-child(20).clear .stamp_box img {
  animation-delay: 1.25s;
}

/* kirakira */
.img_correct .kirakira {
  opacity: 0;
  animation: anime_opacity 1s linear 2s forwards;
}

/* スタンプ着地の直後に光り出す */
.item_wrap .img_correct .kirakira {
  animation-delay: 0.9s;
}

.item_wrap .img_correct .kirakira img:nth-child(3) {
  animation-delay: 0.4s;
}

.item_wrap .img_correct .kirakira img:nth-child(4) {
  animation-delay: 0.75s;
}

.img_correct .kirakira img {
  animation: kirakira 1.5s linear 0s infinite;
}

.img_correct .kirakira img:nth-child(2),
.img_correct .kirakira img:nth-child(4),
.img_correct .kirakira img:nth-child(6) {
  animation-name: kirakira02;
}

/* message dialog */
.item_wrap .get_message:not(.no_anime) {
  opacity: 0;
  animation: anime_opacity 0.2s linear forwards;
  animation-delay: 2s;
}

.item_wrap .get_message:not(.no_anime) .message_box p {
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  animation: message_appear 2s;
  animation-delay: 2.25s;
  width: 0;
  animation-fill-mode: both;
}


.item_wrap .message_box p#text_step13 {
  width: 13em;
  animation-timing-function: steps(13);
}

.item_wrap .message_box p#text_step15 {
  width: 15em;
  animation-timing-function: steps(15);
}




/* 宝箱オープン */
.treasure_open_anime * {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

}

.treasure_open_anime .tap {
  animation: 1.5s linear 1s infinite;
  animation-delay: 0s;
  animation-name: anime_floating;

}

.treasure_open_anime.open .tap {
  opacity: 0;
}

.treasure_open_anime.open .treasure span.treasure_a1 {
  animation: fadeout 2s ease forwards;
}

.treasure_open_anime.open .treasure span.treasure_a2,
.treasure_open_anime.open .treasure span.treasure_a3,
.treasure_open_anime.open .treasure span.treasure_a4 {
  opacity: 0;
  animation: fadein-out 3s ease forwards;
}

.treasure_open_anime.open .treasure span.treasure_a5,
.treasure_open_anime.open .kotodama {
  opacity: 0;
  animation: fadein 1s ease forwards;
}

.treasure_open_anime.open .kotodama {
  -ms-filter: blur(10px);
  filter: blur(10px);
  animation-duration: 3s;
}

@keyframes fadeout {
  100% {
    opacity: 0;
  }
}

@keyframes fadein-out {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadein {
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}

/*以下遅延の指定*/
.treasure_open_anime.open .treasure span.treasure_a2 {
  animation-delay: 0.5s;
}

.treasure_open_anime.open .treasure span.treasure_a3 {
  animation-delay: 2s;
}

.treasure_open_anime.open .treasure span.treasure_a4 {
  animation-delay: 3.5s;
}

.treasure_open_anime.open .treasure span.treasure_a5 {
  animation-delay: 5s;
}

.treasure_open_anime.open .kotodama {
  animation-delay: 7s;
}



/* incorrect */
.answer_img .img_incorrect .bg_img {
  top: 0;
  opacity: 0.3;
  animation: 1.5s linear 0s;
  animation-name: ink;
}

.answer_img .img_incorrect .ase img {
  animation: ase 1s linear 0s;
}

/* ? */
.tab .badge {
  animation: 1s ease-in-out 0s infinite;
  animation-delay: 1s;
  animation-name: anime_dokidoki;
}


/* clear title */
.big_title img,
.clear_spot {
  animation: success_appear 0.2s ease-in both;
  animation-delay: 0.45s;
  /* スタンプが降りてくる途中で出す */
  opacity: 0;
  transform: translate(0.9, 0.9);
}

.big_title img {
  animation-delay: 0.55s;
}

@keyframes success_appear {
  0% {
    transform: scale(0.9);
    opacity: 0;
    transform: translate(0.9, 0.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    transform: translate(1, 1);
  }
}


.lock_wrap .lock span.clear {
  animation: lock_open 0.2s forwards;
  transform: scale(1, 0);
  transform-origin: top;
}

.lock_wrap .lock span.num_1.clear {
  animation-delay: 0.25s;
}

.lock_wrap .lock span.num_2.clear {
  animation-delay: 0.5s;
}

.lock_wrap .lock span.num_3.clear {
  animation-delay: 0.75s;
}

.lock_wrap .lock span.num_4.clear {
  animation-delay: 1s;
}

.area_clear .lock_wrap .lock_top {
  animation: lock_top 0.2s forwards 1.4s;
}

.bg_shine {
  animation: fadein 0.5s linear 1.5s forwards, kururi 10s linear infinite;
  opacity: 0;
}

@keyframes lock_open {
  0% {
    transform: scale(1, 0) translate(0, -100%);
  }

  100% {
    transform: scale(1, 1) translate(0, 0);
  }
}

@keyframes lock_top {
  0% {
    height: 19.5vw;
    margin-top: 0vw;
  }

  100% {
    height: 25.5vw;
    margin-top: -6vw;
  }
}

.item_wrap .chara img.hakase {
  animation: hakase_view 1s ease 1.5s forwards, hakase_runrun 0.8s ease 2.5s infinite;
  transform: translate(0, 200%) rotate(10deg);
}

.item_wrap .chara img.josu {
  animation: josu_modoru 1s forwards;
  animation-delay: 4.75s;
  transform: rotate(25deg);
  transform-origin: bottom;
}

@keyframes hakase_view {
  0% {
    transform: translate(0, 200%) rotate(10deg);
  }

  100% {
    transform: translate(0, -2%) rotate(10deg);
  }
}

@keyframes hakase_runrun {

  0%,
  100% {
    transform: translate(0, -2%) rotate(10deg);
  }

  50% {
    transform: translate(0, 2%) rotate(10deg);
  }
}

@keyframes josu_modoru {
  0% {
    transform: rotate(25deg);
  }

  100% {
    transform: rotate(-25deg);
  }
}




/* extra clear */
/*.complete {
  animation: sunset_color 8s linear both;
}*/
.complete .sunset {
  animation: sunset_shizumu 4.5s linear both, sunset_blur 4.5s linear both;
  opacity: 0;
}

.complete .ktdm_sunset {
  animation: sunset_noboru 3.5s ease-in-out 0s both, sunset_fuwafuwa 2s linear 3.6s infinite;
}

.complete .ktdm_sunset img {
  animation: fadein 2s ease-in both;
  animation-delay: 3.5s;
  opacity: 0;
}

.complete .clear_spot {
  animation-delay: 5s;
}

.complete .big_title img {
  animation-delay: 5.1s;
}

.item_wrap.complete .get_message:not(.no_anime),
.item_wrap.complete .get_message:not(.no_anime) .message_box p {
  animation-delay: 5.5s;
}

/*@keyframes sunset_color {
  0% { background-color: #FFC657; }
  50% { background-color: #FFC657; }
  100% { background-color: #F59B00; }
}*/

@keyframes sunset_shizumu {
  0% {
    transform: translateY(10vw);
  }

  100% {
    transform: translateY(60vw);
  }
}

@keyframes sunset_blur {
  0% {
    filter: blur(0vw);
  }

  50% {
    opacity: 1;
    filter: blur(0vw);
  }

  100% {
    opacity: 1;
    filter: blur(5vw);
  }
}

@keyframes sunset_noboru {
  0% {
    transform: translateY(0vw) scale(0.4, 0.4);
    filter: blur(20vw);
    opacity: 0;
  }

  100% {
    transform: translateY(-62vw) scale(1, 1);
    filter: blur(0vw);
    opacity: 1;
  }
}

@keyframes sunset_fuwafuwa {

  0%,
  100% {
    transform: translateY(-62vw);
  }

  50% {
    transform: translateY(-60vw);
  }
}



.map_area .extra_area {
  animation: move_side 1s linear infinite;
}

@keyframes move_side {

  0%,
  100% {
    transform: translateX(-1.5%);
  }

  50% {
    transform: translateX(1.5%);
  }
}