@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 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, .point_box:before {
  animation: 1.5s linear 1s infinite;
	animation-delay:0s;
  animation-name: anime_floating;
}

/* 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;
}

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

.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);
}



@keyframes fadeout {
    100% {  opacity: 0;}
}
@keyframes fadein-out {
    50% {  opacity: 1;}
    100% {  opacity: 0;}
}
@keyframes fadein {
    100% {  opacity: 1; 
	-ms-filter: none;
  filter:  none;
	}
}


/* 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.2s;
	opacity: 0;
	transform: translate(0.9,0.9);
}
.big_title img {
	animation-delay: 0.4s;
}
@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); }
}

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

.item_wrap .chara img.hakase {
  animation: hakase_view 1s ease 0.5s forwards, hakase_runrun 0.8s ease 1.5s infinite;
	transform:translate(0,200%) rotate(10deg);
}
.item_wrap .chara.last_message img.hakase, .item_wrap .chara.last_message .text {
  animation: hakase_view02 1s ease 0.5s forwards, hakase_runrun02 0.8s ease 1.5s infinite;
	transform:translate(0,70vw) rotate(0);
}
@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  hakase_view02 {
  0% { transform:translate(0,80vw); }
  100% { transform: translate(0,-3px); }
}
@keyframes  hakase_runrun02 {
  0%, 100% { transform:translate(0,-3px) rotate(0deg); }
  50% { transform: translate(0,3px) rotate(0deg); }
}

.item_wrap .img_anime.img_correct > img, .all_clear .stamp img {
  animation: stamp_pon 1s cubic-bezier(0.65, 0, 0.35, 1) 0s forwards;
	transform:scale(1.5, 1.5); opacity: 0;
}
@keyframes stamp_pon {
  0% { transform:scale(1.5, 1.5); opacity: 0; }
  100% { transform:scale(1, 1); opacity: 1; }
}


.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; }



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

@keyframes move_side {
  0%, 100% { transform: translateX(-1.5%); }
  50% { transform: translateX(1.5%); }
}