@charset "utf-8";


#kg_wrap{
    max-width: 853px;
    margin: 0 calc( 65/(853 + 65*2) * 100%);
}

#kg_story {
    background: url("/img/kindergarten/bg-default.jpg") no-repeat left top;
    margin: 0 auto;
    position: relative;
    padding: calc(10/853*100%);
    aspect-ratio: 853 / 599;
    box-sizing: border-box;
    background-size: 100%;
}

#kg_inner {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    position: relative;
}

#kg_inner .slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
#kg_inner .slide img{
    max-width: 100%;
    height: auto;
}

#kg_inner #kg_00 {
    z-index: 5;
}

#kg_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#kg_btn_prev, #kg_btn_next {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}
#kg_btn_prev, #kg_btn_next {
    width: calc(65/853*100%);
}
#kg_btn_prev img, #kg_btn_next img{
    width: 100%;
    height: auto;
}

#kg_btn_prev {
    right: 100%;
}

#kg_btn_next {
    left: 100%;
}

#kg_btn_start {
    position: absolute;
    top: calc(380/579*100%);
    left: calc(100/833*100%);
    width: calc(165/833*100%);
}

.slide_drop_shadow {
    box-shadow: -2px 2px 10px 0 #000000;
}
@media (min-width: 768px) {
    .slide_drop_shadow {
        box-shadow: -5px 5px 20px 0 #000000;
    }
}

#kg_btn_re-start {
    position: absolute;
    top: calc(40/579*100%);
    left: calc(40/833*100%);
    width: calc(165/833*100%);
}

.check_btn {
    position: absolute;
    bottom: calc(30/579*100%);
    left: calc(30/833*100%);
    width: calc(211/833*100%);
}

.kg_popup {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    z-index: 8;
    background: url('/img/kindergarten/popup/bkg.png') top left repeat;
}

.kg_popup .kg_close {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    height: 46px;
    width: 47px;
    top: calc(20/579*100%);
    right: calc(20/833*100%);
    height: calc(47/579*100%);
    width: calc(47/833*100%);
    background: url('/img/kindergarten/popup/kg-close.png') no-repeat top left / 100% auto;
}


/*GIF animate*/

.animateElem {
    position: absolute;
    z-index: 5;
}

#kg_00_elem01 {
    top: calc(360/579*100%);
    left: calc(317/833*100%);
    width: calc(125/833*100%);
}

#kg_01_elem01 {
    top: calc(217/579*100%);
    left: calc(468/833*100%);
    width: calc(240/833*100%);
}

#kg_02_elem01 {
    top: calc(187/579*100%);
    left: calc(134/833*100%);
    width: calc(283/833*100%);
}

#kg_03_elem01 {
    top: calc(0/579*100%);
    left: calc(415/833*100%);
    width: calc(210/833*100%);
}

#kg_04_elem01 {
    top: calc(378/579*100%);
    left: calc(375/833*100%);
    width: calc(26/833*100%);
}

#kg_05_elem01 {
    top: calc(14/579*100%);
    left: calc(15/833*100%);
    width: calc(282/833*100%);
}

#kg_06_elem01 {
    top: calc(261/579*100%);
    left: calc(219/833*100%);
    width: calc(264/833*100%);
}

#kg_07_elem01 {
    top: calc(315/579*100%);
    left: calc(200/833*100%);
    width: calc(232/833*100%);
}

#kg_08_elem01 {
    top: calc(261/579*100%);
    left: calc(496/833*100%);
    width: calc(40/833*100%);
}

#kg_09_elem01 {
    top: calc(242/579*100%);
    left: calc(224/833*100%);
    width: calc(373/833*100%);
}

#kg_10_elem01 {
    top: calc(282/579*100%);
    left: calc(284/833*100%);
    width: calc(270/833*100%);
}

#kg_11_elem01 {
    top: calc(223/579*100%);
    left: calc(239/833*100%);
    width: calc(211/833*100%);
}

#kg_12_elem01 {
    top: calc(375/579*100%);
    left: calc(277/833*100%);
    width: calc(15/833*100%);
}

#kg_13_elem01 {
    top: calc(197/579*100%);
    left: calc(556/833*100%);
    width: calc(43/833*100%);
}



.hide {
    display: none;
}