@charset "utf-8";
/* #disp_count {
     background-color: #093;
     color: #FFF;
     font-size: 72px;
     border-radius: 10px;
     padding: 20px;
     display: table-cell;
} */
/* Foundation
-------------------------------------- */

@import url(css/Foundation/reset.css);
@import url(css/Foundation/utility.css);

body{
    padding: 0;
}

#totop{
    position: fixed;
    width: 5rem;
    bottom: 1rem;
    right: 3%;
    z-index: 1000;
}
#totop .totop_ex_img,#totop .totop_normal_img{
    display: none;
}
#totop.act_totopex .totop_ex_img{
    display: block;
}
#totop.act_totop .totop_normal_img{
    display: block;
}
.main{
    padding: 8rem 0;
}
.game{
    position: relative;
    overflow: hidden;
}
.area{
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    position: relative;
    height: 55rem;
    border-top: solid 2rem #FFFF00;
    background-image: url("img/top/back.jpg");
    background-size: cover;
}

.button{
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    position: relative;
    height: 13rem;
    background-color: #37a8e1;
    /* border-bottom: solid 2rem #FFFF00; */
}



.button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
}

.button li{
    list-style: none;
    width: 30%;
    margin-top: -5rem;
}
.home{
    position: absolute;
    top:0;
    left: 3%;
    width: 10rem;
}
.backs_ex .area{
    border-top: solid 2rem #D00000;

}
.backs_ex .button{
    border-bottom: solid 2rem #D00000;
}
@media all and (min-width: 600px) {
    .area{
        margin: 0 auto;
        width: 100%;
        background-color: #fff;
        position: relative;
        height: 115vw;
        border-top: solid 2rem #FFFF00;
        background-image: url("img/top/back.jpg");
        background-size: cover;
    }

    .button{
        margin: 0 auto;
        width: 100%;
        position: relative;
        height: 22rem;
        background-color: #37a8e1;
        /* border-bottom: solid 2rem #FFFF00; */
    }
    .button li{
        list-style: none;
        width: 30%;
        margin-top: -15rem;
    }
    .home{
        width: 20rem;
    }
}
@media all and (min-width: 800px) {
    .game{
        position: relative;
        max-width: 150rem;
        margin: -50rem auto 0;
        padding: 2rem 30rem 2rem 5rem;
        background-color: #FFFF00;
        border-radius: 3rem;
        z-index: 500;
        width: 92%;
    }
    .area{
        height: 75rem;
        position: relative;
        background-position-y: 46%;
        border-bottom: solid 2rem #FFFF00;
    }
    .area #move{
        overflow: hidden;
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .button{
        margin: 0 auto;
        background-color: transparent;
        position: absolute;
        bottom: 5%;
        right: 15rem;
        height: 50rem;
        border-bottom: none;
        flex-direction: column;
        width: 12rem;
        justify-content: space-between;
    }
    .button li{
        list-style: none;
        width: 12rem;
        margin-top: 0;
    }
    .home {
        top: 2rem;
        left: auto;
        right: 5.5rem;
        width: 19rem;
    }
}
@media all and (min-width: 800px) {
    .game{
        width: 92%;
    }
    .backs_ex{
        padding-bottom: 0;
    }
    .backs_ex .game_back{
        position: relative;
        z-index: 10;
        padding: 12rem 0;
        background-color: #D00000;
    }
    .backs_ex .area{
        border-top: solid 2rem #FFFF00;

    }
    .backs_ex .button{
        border-bottom: none;
    }
    .backs_ex .game{
        margin: 0 auto 0;
    }
}
@media all and (min-width: 1500px) {
    .game{
        width: 100%;
    }
}
/* ゲージ部分 */
#btn_count_up,#speak,#alay {
    font-size: 2rem;
    padding: 10px;
    z-index: 200;
    width: 100%;
    height: 16rem;
}

#speak{
    background-image: url("img/top/btn.png");
    background-position: center;
}
#alay{
    background-image: url("img/top/btn2.png");
    background-position: center;
}
#btn_count_up{
    background-image: url("img/top/btn3.png");
    background-position: center;
}



.gauge_wrap > li{
     list-style: none;
     position: absolute;
     bottom: 6rem;
     right: 1rem;
     background-color: #fff;
     padding: 1rem 0.5rem;
     border-radius: 1rem;
}
.gauge_wrap li p{
     font-size: 1.2rem;
     line-height: 1.2;
}


.gauge_wrap li > .meter {
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    border-right: solid 1px #000;
    width: 22px;
    height: 236px;
    transform: rotate(180deg);
    margin-left: 1rem;
    padding: 0 5px;
    display: flex;

}
 
.gauge_wrap .gauge_main {
    /* background: -moz-linear-gradient(top, rgb(255, 247, 153), #0FF);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(216, 153, 255)), to(#0FF)); */
    height: 0;
    width: 1%;
    transition: all  0.3s ease;
    position: relative;
    z-index: 2;

}

.gauge_wrap .gauge_main::after {
    content: "";
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translateY(50%) translateX(90%);
    width: 6rem;
    height: 2.5rem;
    background-image: url("img/top/meet.png");
    background-size: cover;
}


.gauge_wrap li > .meter ul li{
    width: 10px;
    height: 10px;
    margin: 0.5rem 0;
    opacity: 0;
    transition: all  0.3s ease;
    z-index: 1;
}
.gauge_wrap li > .meter ul li.sq{
    background-color: #89F761;
}
.gauge_wrap li > .meter ul li.sq2{
    background-color: #F7D461;
}
.gauge_wrap li > .meter ul li.sq3{
    background-color: #FD7C1D;
}
.gauge_wrap li > .meter ul li.sq4{
    background-color: #D00000;
}
.gauge_wrap li > .meter ul li.sq5{
    background-color: #810000;
}

.gauge_wrap li > .meter ul li.display{
    opacity: 1;
}



.test {
    height: 30px !important;
}
/* .test2 {
    height: 70px !important;
} */
.test2 {
    height: 70px !important;
}
/* .test4 {
    height: 150px !important;
} */
.test4 {
    height: 130px !important;
}
.test5 {
    height: 170px !important;
}
.test6 {
    height: 200px !important;
}
.test7 {
    height: 213px !important;
}
.test8 {
    height: 220px !important;
}
.test9 {
    height: 235px !important;
}
@media all and (min-width: 600px) {
    #btn_count_up,#speak,#alay {
        width: 100%;
        height: 20rem;
        background-size: contain;
    }
    .gauge_wrap > li{
        bottom: 13rem;
        right: 2rem;
        padding: 3rem 1.5rem;
    }
    .gauge_wrap li p{
        font-size: 1.4rem;
        line-height: 1.2;
    }
    .gauge_wrap li > .meter {
        width: 32px;
        height: 350px;
        margin-left: 1rem;
        padding: 0 5px;
    }
    .gauge_wrap li > .meter ul li{
        width: 17.5px;
        height: 17.5px;
        margin: 0.5rem 0;
        opacity: 0;
        transition: all  0.3s ease;
        z-index: 1;
    }
    .gauge_wrap .gauge_main::after {
        transform: translateY(50%) translateX(90%);
        width: 11rem;
        height: 4.5rem;
    }
    .test {
        height: 60px !important;
    }
    .test2 {
        height: 105px !important;
    }
    .test3 {
        height: 180px !important;
    }
    .test4 {
        height: 190px !important;
    }
    .test5 {
        height: 250px !important;
    }
    .test6 {
        height: 295px !important;
    }
    .test7 {
        height: 315px !important;
    }
    .test8 {
        height: 335px !important;
    }
    .test9 {
        height: 360px !important;
    }

}

@media all and (min-width: 600px) {
    #btn_count_up,#speak,#alay {
        width: 100%;
        height: 14rem;
        background-size: contain;
    }
    .gauge_wrap > li{
        bottom: 9rem;
        padding: 3rem 1.5rem;
    }
}
@media all and (min-width: 800px) {
    .gauge_wrap li > .meter {
        height: 375px;
    }
    .gauge_wrap .gauge_main::after {
        transform: translateY(50%) translateX(90%);
        width: 9rem;
        height: 3.5rem;
    }
    .gauge_wrap > li{
        right: -26rem;
    }
    .gauge_wrap > li{
        bottom: 0.8rem;
    }
}


.area .back1,.area .back2{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.eat3 .back1 #eatb1{
    display: block;
    width: 300%;
    height: 65rem;
    background-image:
        url(img/top/nmeet.png),
        url(img/top/nmeet2.png);
    background-position:
        0 0,
        5% 0;
    background-repeat:
        repeat,
        repeat;
    background-size: 50%;
    animation: bgroop 2s linear infinite;
}
.eat4 .back1 #eatb1{
    display: block;
    width: 300%;
    height: 65rem;
    background-image:
        url(img/top/gmeet.png),
        url(img/top/gmeet2.png);
    background-position:
        0 0,
        5% 0;
    background-repeat:
        repeat,
        repeat;
    background-size: 50%;
    animation: bgroop 2s linear infinite;
}
.eat5 .back1 #eatb1{
    display: block;
    width: 300%;
    height: 65rem;
    background-image:
        url(img/top/gmeet.png),
        url(img/top/gmeet2.png);
    background-position:
        0 0,
        5% 0;
    background-repeat:
        repeat,
        repeat;
    background-size: 50%;
    animation: bgroop 2s linear infinite;
}

.eat5 .back1{
    background : linear-gradient(to right, red, orange, yellow, green, aqua, blue, red);
    background-position-x:0%;
}
.eat6 .back1 #eatb1{
    display: block;
    width: 300%;
    height: 65rem;
    background-image:
        url(img/top/gmeet.png),
        url(img/top/gmeet2.png);
    background-position:
        0 0,
        5% 0;
    background-repeat:
        repeat,
        repeat;
    background-size: 50%;
    animation: bgroop 2s linear infinite;
}

.eat6 .back1{
    background : linear-gradient(to right, red, orange, yellow, green, aqua, blue, red);
    background-position-x:0%;
}
@keyframes bgroop {
    from {
        background-position:
            0 0,
            5% 0;
    }
    to {
        background-position:
            100% 0,
            105% 0;
    }
}


.area .cara{
    position: absolute;
    top: 60%;
    left: 45%;
    transform: translateY(-50%) translateX(-50%);
}
.area .cara div{
    width: 30rem;
    height: 30rem;
}

.area .cara #ball{
    width: 40rem;
    height: 40rem;
}
.area .cara #happen{
    width: 35rem;
    height: 35rem;
}
.area .cara #nuun{
    width: 35rem;
    height: 35rem;
}
.area .cara #flirt,.area .cara #fly,
.area .cara #eat_max,.area .cara #panic,.area .cara #two,.cara #speakex{
    width: 65rem;
    height: 65rem;
}
.area .cara #done,.area .cara #exform{
    width: 107rem;
    height: 65rem;
}
.area .cara #exform{
    width: 80rem;
    height: auto;
}
.area .cara #ang{
    width: 90rem;
    height: 65rem;
    margin-bottom: 10rem;
}
.area .cara #two{
    margin-bottom: 10rem;
}
.area .ball{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.area .ball div{
    width: 5rem;
    height: 5rem;
    background-color: rgb(179, 179, 179);
    border-radius: 50%;
}
.area figure{
    position: absolute;
    top: 4%;
    right: 5%;
    font-size: 2.1rem;
    font-weight: 700;
    background-image: url("img/top/huki.png");
    background-position: center;
    background-size: contain;
    width: 50%;
    height: 31%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.area figure.size{
    animation: v_in 5s linear 0s 1 forwards;
}
.area figure.size2{
    top: 0%;
    width: 55%;
    height: 35%;
    animation: v_in2 5s linear 0s 1 forwards;
}
.area figure.size3{
    top: 0%;
    width: 55%;
    height: 35%;
    animation: v_in3 5s linear 0s 1 forwards;
}
.area figure.size4{
    top: 0%;
    width: 55%;
    height: 35%;
    animation: v_in4 5s linear 0s 1 forwards;
}
.area figure.size5{
    right: 0%;
    width: 50%;
    height: 31%;
    animation: v_in5 5s linear 0s 1 forwards;
}


.area .cara #eat{
    width: 60rem;
    height: 60rem;
}
@media all and (min-width: 400px) {
    .area figure{
        width: 42%;
        height: 31%;
        right: 10%;
    }
}
@media all and (min-width: 600px) {
    .area .back1 #eatb1{
        width: 250%;
        height: 115vw;
        background-size: 50%;
    }
    .area figure{
        width: 42%;
        height: 31%;
        right: 10%;
        font-size: 3rem;
    }
    .area .cara #two{
        margin-bottom: 20rem;
    }
    .area .cara div{
        width: 60rem;
        height: 60rem;
    }
    .area .cara #ball,.area .cara #nuun{
        width: 75rem;
        height: 75rem;
    }
    .area .cara #eat{
        width: 120rem;
        height: 110rem;
    }
    .area .cara #happen{
        width: 75rem;
        height: 75rem;
    }
    .area .cara #flirt,.area .cara #fly,.area .cara #done,.area .cara #ang,
    .area .cara #eat_max,.area .cara #panic,.area .cara #two,.area .cara #exform,.cara #speakex{
        width: 130rem;
        height: 130rem;
    }
    .area .back #eatb2{
        width: 300%;
        height: 115vw;
    }
    .area .cara #done,.area .cara #ang{
        width: 170rem;
        height: auto;
        margin-bottom:16rem;
    }
}
@media all and (min-width: 800px) {
    .area .back1 #eatb1{
        width: 250%;
        height: 75rem;
        background-size: 50%;
    }
    .area .cara{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    .area figure{
        width: 42%;
        height: 31%;
        right: 2%;
        font-size: 3rem;
    }
    .area .cara div{
        width: 50rem;
        height: 50rem;
    }
    .area .cara #ball,.area .cara #nuun{
        width: 60rem;
        height: 60rem;
    }
    .area .cara #eat{
        width: 100rem;
        height: 100rem;
    }
    .area .cara #happen{
        width: 60rem;
        height: 60rem;
    }
    .area .cara #flirt,.area .cara #fly,.area .cara #done,.area .cara #ang,
    .area .cara #eat_max,.area .cara #panic{
        width: 120rem;
        height: 110rem;
    }
    .area .cara #exform{
        width: 120rem;
        height: 110rem;
        margin-bottom: 7rem;
    }
    .cara #speakex{
        width: 120rem;
        height: auto;
        margin-bottom: 7rem;
    }
    .area .cara #done,.area .cara #ang{
        width: 120rem;
        height: 120rem;
        margin-bottom:5rem;
    }
    .area .cara #two{
        width: 120rem;
        height: 120rem;
        margin-bottom: 20rem;
    }
    .area .cara #fly{
        padding-bottom: 9rem;
    }
    .area .cara #done,.area .cara #ang{
        width: 135rem;
        height: auto;
        margin-bottom:15rem;
    }
}



#speaks,#ball,#eat,#flirt,#happen,#panic,#nuun,#fly,#two,#done,#ang,
#eat_max,#exform,.back1,.back2,#speakex{
    opacity: 0;
}
.voice1 #data{
	animation: v_fade 5s linear 0s 1 normal;
}
.voice1 #speaks{
	animation: v_in 5s linear 0s 1 normal;
}
.voice2 #data{
	animation: v_fade2 5s linear 0s 1 normal;
}
.voice2 #panic{
	animation: v_in2 5s linear 0s 1 normal;
}
.voice3 #data{
	animation: v_fade3 5s linear 0s 1 normal;
}
.voice3 #nuun{
	animation: v_in3 5s linear 0s 1 normal;
}
.voice4 #data{
	animation: v_fade4 5s linear 0s 1 normal;
}
.voice4 #fly{
	animation: v_in4 5s linear 0s 1 normal;
}
.voice5 #data{
	animation: v_fade5 5s linear 0s 1 normal;
}
.voice5 #two{
	animation: v_in5 5s linear 0s 1 normal;
}
.voice6 #data{
	animation: v_fade6 5s linear 0s 1 normal;
}
.voice6 #speakex{
	animation: v_in6 5s linear 0s 1 normal;
}
.voice7 #data{
	animation: v_fade7 5s linear 0s 1 normal;
}
.voice7 #speakex{
	animation: v_in7 5s linear 0s 1 normal;
}
.voice8 #data{
	animation: v_fade8 5s linear 0s 1 normal;
}
.voice8 #speakex{
	animation: v_in8 5s linear 0s 1 normal;
}

@keyframes v_fade{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}

@keyframes v_fade2{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in2{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}

@keyframes v_fade3{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in3{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes v_fade4{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in4{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes v_fade5{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in5{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes v_fade6{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in6{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes v_fade7{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in7{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes v_fade8{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes v_in8{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}

.motion1 .cara{
	animation: shake 2.5s linear 0s 2 normal;
}

/* .motion2 .cara{
	animation: shake2 5s linear 0s 1 normal;
} */

.motion3 .cara{
	animation: shake3 5s linear 0s 1 normal;
}
.motion1 .cara #data{
	animation: s_fade 5s linear 0s 1 normal;
}
.motion1 .cara #ball{
	animation: s_in 5s linear 0s 1 normal;
}
.motion2 .cara #data{
	animation: s_fade2 5s linear 0s 1 normal;
}
.motion2 .cara #ball{
	animation: s_in2 5s linear 0s 1 normal;
}
.motion3 .cara #data{
	animation: s_fade3 5s linear 0s 1 normal;
}
.motion3 .cara #ball{
	animation: s_in3 5s linear 0s 1 normal;
}
.motion4 .cara #data{
	animation: s_fade4 5s linear 0s 1 normal;
}
.motion4 .cara #done{
	animation: s_in4 5s linear 0s 1 normal;
}
.motion5 .cara #data{
	animation: s_fade5 5s linear 0s 1 normal;
}
.motion5 .cara #ang{
	animation: s_in5 5s linear 0s 1 normal;
}
@media all and (min-width: 400px) {
    .motion2 .cara #ball{
        animation: s_in2tab 5s linear 0s 1 normal;
    }
}
@keyframes shake{
	0% {
        left: 50%;
    }
	33% {
        left: 65%;
    }
	66% {
        left: 35%;
    }
	100% {
        left: 50%;
    }
}
/* @keyframes shake2{
	0% {
       top: 50%;
    }
	10% {
       top: 50%;
    }
	20% {
       top: 30%;
    }
	25% {
        top: 30%;
    }
	35% {
        top: 50%;
    }
	50% {
        top: 50%;
    }
	60% {
       top: 50%;
    }
	70% {
       top: 30%;
    }
	75% {
        top: 30%;
    }
	85% {
        top: 50%;
    }
	100% {
        top: 50%;
    }
} */
@keyframes shake3{
	0% {
        left: 50%;
    }
	45% {
        left: 65%;
        opacity: 1;
    }
	50% {
        left: 100%;
        opacity: 0;
    }
	60%{
        left: 0%;
        opacity: 0;
    }
	65% {
        left: 50%;
        opacity: 1;
    }
	100% {
        left: 50%;
    }
}
@keyframes s_fade{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes s_in{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}

@keyframes s_fade2{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes s_in2{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
        width: 40rem;
        height: 40rem;
    }
	35% {
        opacity: 1;
        width: 60rem;
        height: 60rem;
    }
	65% {
        opacity: 1;
        width: 30rem;
        height: 30rem;
    }
	97% {
        opacity: 1;
        width: 40rem;
        height: 40rem;
    }
	100% {
        opacity: 0;
    }
}

@keyframes s_in2tab{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
        width: 60rem;
        height: 60rem;
    }
	35% {
        opacity: 1;
        width: 110rem;
        height: 110rem;
    }
	65% {
        opacity: 1;
        width: 40rem;
        height: 40rem;
    }
	97% {
        opacity: 1;
        width: 60rem;
        height: 60rem;
    }
	100% {
        opacity: 0;
    }
}


@keyframes s_fade3{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes s_in3{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes s_fade4{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes s_in4{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes s_fade5{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes s_in5{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}


.eat1 .cara #data{
	animation: e_fade 4s linear 0s 1 normal;
}
.eat1 .cara #eat{
	animation: e_in 4s linear 0s 1 normal;
}
.eat2 .cara #data{
	animation: e_fade2 4s linear 0s 1 normal;
}
.eat2 .cara #eat{
	animation: e_in2 4s linear 0s 1 normal;
}
.eat3 .cara #data{
	animation: e_fade3 4s linear 0s 1 normal;
}
.eat3 .cara #flirt{
	animation: e_in3 4s linear 0s 1 normal;
}
.eat3 .back1{
	animation: e_back3 4s linear 0s 1 normal;
}
.eat4 .cara #data{
	animation: e_fade4 4s linear 0s 1 normal;
}
.eat4 .cara #happen{
	animation: e_in4 4s linear 0s 1 normal;
}
.eat4 .back1{
	animation: e_back4 4s linear 0s 1 normal;
}
.eat5 .cara #data{
	animation: e_fade5 9.5s linear 0s 1 normal;
}
.eat5 .cara #eat_max{
	animation: e_in5 9.5s linear 0s 1 normal;
}
.eat5 .back1{
	animation: e_back5 7.5s linear 0s 1 normal;
}
.eat6 .cara #data{
	animation: e_fade6 11.5s linear 0s 1 normal;
}
.eat6 .cara #exform{
	animation: e_in6 11.5s linear 0s 1 normal;
}
.eat6 .back1{
	animation: e_back5 5s linear 0s 1 normal;
}
.none{
    opacity: 0;
}



@keyframes e_fade{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_fade2{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in2{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_fade3{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in3{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_back3{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_fade4{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in4{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_back4{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_fade5{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in5{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_fade6{
	0% {
        opacity: 1;
    }
	3% {
        opacity: 0;
    }
	97% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}
@keyframes e_in6{
	0% {
        opacity: 0;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
    }
}
@keyframes e_back5{
	0% {
        opacity: 0;
        background-position: 0%;
    }
	3% {
        opacity: 1;
    }
	97% {
        opacity: 1;
    }
	100% {
        opacity: 0;
        background-position-x: 200%;
    }
}