@charset "utf-8";

body{
    background:#C4E8FF;
    background-image:url(/img/image.jpg);
    background-position:center bottom 50px;
    background-repeat:repeat-x;
    height:100vh;
    overflow:hidden;
}
#mainContentsWrapper{
    position:relative;
    z-index:10;
    overflow:hidden;
}
.rain_box{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: 0;
    pointer-events: none;
}
#rainBox_inner{
    position:relative;
    width:1024px;
    margin:auto;
    height:100%;
}
.rain{
    position:absolute;
    top:-5%;
    -webkit-transform:translateX(0%) translateY(0%);
            transform:translateX(0%) translateY(0%);
    -webkit-animation-timing-function:ease-in-out;
            animation-timing-function:ease-in-out;
    border-radius:30%;
}
html[class*="Windows"].osVer7.IE .rain{
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.rainA0{
    -webkit-animation-name:topA;
            animation-name:topA;
}
.rainA1{
    -webkit-animation-name:topB;
            animation-name:topB;
}
.rainA2{
    -webkit-animation-name:topC;
            animation-name:topC;
}
@-webkit-keyframes topA{
    0%{
        top:-5%;
        -webkit-transform:translateX(60%) translateY(-200%);
                transform:translateX(60%) translateY(-200%);
    }
    10%{
        -webkit-transform:translateX(-140%);
                transform:translateX(-140%);
    }
    20%{
        -webkit-transform:translateX(100%) translateY(-200%);
                transform:translateX(100%) translateY(-200%);
    }
    30%{
        -webkit-transform:translateX(-80%);
                transform:translateX(-80%);
    }
    40%{
        -webkit-transform:translateX(100%) translateY(-140%);
                transform:translateX(100%) translateY(-140%);
    }
    50%{
        -webkit-transform:translateX(-260%) translateY(-200%);
                transform:translateX(-260%) translateY(-200%);
    }
    60%{
        -webkit-transform:translateX(160%) translateY(-260%);
                transform:translateX(160%) translateY(-260%);
    }
    70%{
        -webkit-transform:translateX(-180%) translateY(-200%);
                transform:translateX(-180%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(180%);
                transform:translateX(180%);
    }
    90%{
        -webkit-transform:translateX(-60%);
                transform:translateX(-60%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}
@keyframes topA{
    0%{
        top:-5%;
        -webkit-transform:translateX(60%) translateY(-200%);
                transform:translateX(60%) translateY(-200%);
    }
    10%{
        -webkit-transform:translateX(-140%);
                transform:translateX(-140%);
    }
    20%{
        -webkit-transform:translateX(100%) translateY(-200%);
                transform:translateX(100%) translateY(-200%);
    }
    30%{
        -webkit-transform:translateX(-80%);
                transform:translateX(-80%);
    }
    40%{
        -webkit-transform:translateX(100%) translateY(-140%);
                transform:translateX(100%) translateY(-140%);
    }
    50%{
        -webkit-transform:translateX(-260%) translateY(-200%);
                transform:translateX(-260%) translateY(-200%);
    }
    60%{
        -webkit-transform:translateX(160%) translateY(-260%);
                transform:translateX(160%) translateY(-260%);
    }
    70%{
        -webkit-transform:translateX(-180%) translateY(-200%);
                transform:translateX(-180%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(180%);
                transform:translateX(180%);
    }
    90%{
        -webkit-transform:translateX(-60%);
                transform:translateX(-60%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}

@-webkit-keyframes topB{
    0%{
        top:-5%;
        -webkit-transform:translateX(60%) translateY(-100%);
                transform:translateX(60%) translateY(-100%);
    }
    10%{
        -webkit-transform:translateX(-40%);
                transform:translateX(-40%);
    }
    20%{
        -webkit-transform:translateX(-90%) translateY(-180%);
                transform:translateX(-90%) translateY(-180%);
    }
    30%{
        -webkit-transform:translateX(80%);
                transform:translateX(80%);
    }
    40%{
        -webkit-transform:translateX(-180%) translateY(-200%);
                transform:translateX(-180%) translateY(-200%);
    }
    50%{
        -webkit-transform:translateX(260%) translateY(-100%);
                transform:translateX(260%) translateY(-100%);
    }
    60%{
        -webkit-transform:translateX(0%) translateY(-300%);
                transform:translateX(0%) translateY(-300%);
    }
    70%{
        -webkit-transform:translateX(-100%) translateY(-200%);
                transform:translateX(-100%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(180%) translateY(-300%);
                transform:translateX(180%) translateY(-300%);
    }
    90%{
        -webkit-transform:translateX(-200%);
                transform:translateX(-200%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}

@keyframes topB{
    0%{
        top:-5%;
        -webkit-transform:translateX(60%) translateY(-100%);
                transform:translateX(60%) translateY(-100%);
    }
    10%{
        -webkit-transform:translateX(-40%);
                transform:translateX(-40%);
    }
    20%{
        -webkit-transform:translateX(-90%) translateY(-180%);
                transform:translateX(-90%) translateY(-180%);
    }
    30%{
        -webkit-transform:translateX(80%);
                transform:translateX(80%);
    }
    40%{
        -webkit-transform:translateX(-180%) translateY(-200%);
                transform:translateX(-180%) translateY(-200%);
    }
    50%{
        -webkit-transform:translateX(260%) translateY(-100%);
                transform:translateX(260%) translateY(-100%);
    }
    60%{
        -webkit-transform:translateX(0%) translateY(-300%);
                transform:translateX(0%) translateY(-300%);
    }
    70%{
        -webkit-transform:translateX(-100%) translateY(-200%);
                transform:translateX(-100%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(180%) translateY(-300%);
                transform:translateX(180%) translateY(-300%);
    }
    90%{
        -webkit-transform:translateX(-200%);
                transform:translateX(-200%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}

@-webkit-keyframes topC{
    0%{
        top:-5%;
        -webkit-transform:translateX(200%) translateY(-200%);
                transform:translateX(200%) translateY(-200%);
    }
    10%{
        -webkit-transform:translateX(-100%);
                transform:translateX(-100%);
    }
    20%{
        -webkit-transform:translateX(240%) translateY(-180%);
                transform:translateX(240%) translateY(-180%);
    }
    30%{
        -webkit-transform:translateX(-20%);
                transform:translateX(-20%);
    }
    40%{
        -webkit-transform:translateX(240%) translateY(-300%);
                transform:translateX(240%) translateY(-300%);
    }
    50%{
        -webkit-transform:translateX(-60%) translateY(-100%);
                transform:translateX(-60%) translateY(-100%);
    }
    60%{
        -webkit-transform:translateX(120%) translateY(-200%);
                transform:translateX(120%) translateY(-200%);
    }
    70%{
        -webkit-transform:translateX(-70%) translateY(-200%);
                transform:translateX(-70%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(0%);
                transform:translateX(0%);
    }
    90%{
        -webkit-transform:translateX(-200%);
                transform:translateX(-200%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}

@keyframes topC{
    0%{
        top:-5%;
        -webkit-transform:translateX(200%) translateY(-200%);
                transform:translateX(200%) translateY(-200%);
    }
    10%{
        -webkit-transform:translateX(-100%);
                transform:translateX(-100%);
    }
    20%{
        -webkit-transform:translateX(240%) translateY(-180%);
                transform:translateX(240%) translateY(-180%);
    }
    30%{
        -webkit-transform:translateX(-20%);
                transform:translateX(-20%);
    }
    40%{
        -webkit-transform:translateX(240%) translateY(-300%);
                transform:translateX(240%) translateY(-300%);
    }
    50%{
        -webkit-transform:translateX(-60%) translateY(-100%);
                transform:translateX(-60%) translateY(-100%);
    }
    60%{
        -webkit-transform:translateX(120%) translateY(-200%);
                transform:translateX(120%) translateY(-200%);
    }
    70%{
        -webkit-transform:translateX(-70%) translateY(-200%);
                transform:translateX(-70%) translateY(-200%);
    }
    80%{
        -webkit-transform:translateX(0%);
                transform:translateX(0%);
    }
    90%{
        -webkit-transform:translateX(-200%);
                transform:translateX(-200%);
    }
    100%{
        top:100%;
        -webkit-transform:translateX(60%) translateY(0%);
                transform:translateX(60%) translateY(0%);
    }
}
.moyou{
    margin-bottom: 1rem;
}


.title{
    text-align:center;
}
.title > .image{
    width:40%;
}

#header{
    margin-bottom:1rem;
}




.doubutu_box{
    position:absolute;
    bottom: 128px;
    left:0px;
    width:100%;
}
.doubutu_inner{
    position:relative;
}


.doubutu{
    position:absolute;
    bottom:0px;
    left:0px;
}


.bambiboy{
    bottom: 20px;
    left:720px;
}
.bambigirl{
    bottom:40px;
    left:170px;
}
.bear{
    bottom:80px;
    left:920px;
}
.bird{
    bottom:400px;
    left:820px;
}
.blue{
    bottom:150px;
    left:390px;
}
.cat{
    bottom:70px;
    left:-80px;
}
.hamu{
    bottom:170px;
    left:340px;
}
.rabbit{
    bottom:-30px;
    left:620px;
}
.ferret{
    bottom:-10px;
    left:0px;
}
.ferret_2{
    bottom:310px;
    left:80px;
}


.bambiboy{
    -webkit-animation-name:huriko;
            animation-name:huriko;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transform-origin:8% 100%;
            transform-origin:8% 100%;
}

.bambigirl{
    -webkit-animation-name:huriko;
            animation-name:huriko;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transform-origin:96% 100%;
            transform-origin:96% 100%;
}

.bear{
    -webkit-animation-name:huriko;
            animation-name:huriko;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transform-origin:50% 100%;
            transform-origin:50% 100%;
}
.cat{
    -webkit-animation-name:huriko;
            animation-name:huriko;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transform-origin:50% 100%;
            transform-origin:50% 100%;
}
@-webkit-keyframes huriko{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(-5deg);
                transform:rotate(-5deg);
    }
}
@keyframes huriko{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(-5deg);
                transform:rotate(-5deg);
    }
}

.blue{
    -webkit-animation-name:updown;
            animation-name:updown;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
/* .rabbit{
    animation-name:updown;
    animation-duration: 0.6s;
    animation-timing-function:linear;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
} */
@-webkit-keyframes updown{
    0%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    100%{
        -webkit-transform:translateY(-10%);
                transform:translateY(-10%);
    }

}
@keyframes updown{
    0%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    100%{
        -webkit-transform:translateY(-10%);
                transform:translateY(-10%);
    }

}


.hamu{
    -webkit-animation-name:updown2;
            animation-name:updown2;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:ease;
            animation-timing-function:ease;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@-webkit-keyframes updown2{
    0%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    80%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    100%{
        -webkit-transform:translateY(-10%);
                transform:translateY(-10%);
    }
}
@keyframes updown2{
    0%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    80%{
        -webkit-transform:translateY(0%);
                transform:translateY(0%);
    }
    100%{
        -webkit-transform:translateY(-10%);
                transform:translateY(-10%);
    }
}


.bird {
    -webkit-animation-name:updown3;
            animation-name:updown3;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@-webkit-keyframes updown3{
    0%{
        -webkit-transform:translate(0%);
                transform:translate(0%);
    }
    100%{
        -webkit-transform:translate(-10%,10%);
                transform:translate(-10%,10%);
    }
}
@keyframes updown3{
    0%{
        -webkit-transform:translate(0%);
                transform:translate(0%);
    }
    100%{
        -webkit-transform:translate(-10%,10%);
                transform:translate(-10%,10%);
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .Safari.iOS body {
    background: #C4E8FF;
    background-image: url(/img/image.jpg);
    background-position: center bottom 124px;
    background-repeat: repeat-x;
    height: 100vh;
    overflow: hidden;
}
}

@media screen and (max-width:480px){
    body{
        background-image:none;
        background-position:unset;
        background-repeat:unset;
        height:auto;
        overflow:auto;
    }
    .titleSp{
        width:100%;
        margin:auto;
    }
    .image img{
        width:100%;
        margin:auto;
    }
        .links_wrap{
        width:100%;
    }
    .links_wrap{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        background-color:rgba(255,255,255,0.3);
        padding:0.5rem;
        margin:1rem 0;
        border-radius:1rem;
        /*margin-bottom:10.5rem;*/
    }
    .links_wrap > div{
        text-align: center;
        /* padding: 0.5rem; */
        width: calc(50% - 1rem);
        background-color:#F9F6ED;
        margin:0.5rem;
    }
    .links_wrap > div > a{
        display:block;
        width:100%;
        height:100%;
        padding:0.5rem;
    }
	.links_wrap_2{
        width:100%;
    }
    .links_wrap_2{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        background-color:rgba(255,255,255,0.3);
        padding:0.5rem;
        margin:1rem 0;
        border-radius:1rem;
        margin-bottom:0.5rem;
    }
    .links_wrap_2 > div{
        text-align: center;
        /* padding: 0.5rem; */
        width: 100%;
        background-color:#F9F6ED;
        margin:0.5rem;
    }
	.links_wrap_3{
        width:100%;
    }
    .links_wrap_3{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        background-color:rgba(255,255,255,0.3);
        padding:0.5rem;
        margin:0.5rem 0;
        border-radius:1rem;
        margin-bottom:10.5rem;
    }
    .links_wrap_3 > div{
        text-align: center;
        /* padding: 0.5rem; */
        width: 100%;
        background-color:#F9F6ED;
        margin:0.5rem;
    }
}