@charset "utf-8";
.window_size {
    opacity: 0;
    z-index: -1;
}
#index-main {
    position: relative;
}
#index-main .slick-dots {
    bottom: 20px;
}
#index-main .slick-dots li button {
    cursor: default !important;
}
.slick-dots li button:hover:before {
    opacity: 0.25;
}
#index-main .slick-dots li button:before {
    font-size: 12px;
}
.single-item {
    opacity: 0;
    transition: opacity 0.3s linear;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.single-item,
.single-item .slick-track,
.single-item .slick-list {
    height: 750px;
    height: 100%;
}
.single-item.slick-initialized {
    opacity: 1;
}
.single-item .slick-slide {
    /*overflow: hidden;*/
}
.single-item .bed {
    background: url(../img/animation/img-bed_mofmo_sp.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 100%;
}
.single-item .bed .txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/animation/img-txt_mofmo_sp.png) no-repeat 50% 50%;
    background-size: 100% auto;
    opacity: 0;
}
.single-item .bed .fuwafuwa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/animation/img-bed_mofmo_sp.png) no-repeat 50% 50%;
    background-size: 100% auto;
}
.single-item .slick-continue .bed .txt {
    -webkit-animation: fadeIn 2.9s ease 0.3s 1 normal;
    animation: fadeIn 2.9s ease 0.3s 1 normal;
    animation-fill-mode: forwards;
}
.single-item .slick-continue .bed .fuwafuwa {
    -webkit-animation: fuwafuwa 4.5s infinite linear alternate;
    animation: fuwafuwa 4.5s infinite linear alternate;
}
.single-item .zoom img {
    opacity: 0;
}
.single-item .zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/animation/img-bed_zoom_sp.jpg) no-repeat 50% 50%;
    background-size: cover;
    overflow: hidden;
}
.single-item .slick-continue .zoom {
    -webkit-animation: zoomIn 36s 0s 1;
    animation: zoomIn 36s 0s 1;
    animation-fill-mode: forwards;
}
.single-item .mottiri_bg {
    background: url(../img/animation/img-bed_mottiri_sp.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.single-item .mottiri {
    /*background: url(../img/animation/IMG_0348.PNG) no-repeat 0 100%;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-size: 200% auto;
}
.single-item .mottiri > span {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    opacity: 0;
    width: 26px;
    height: 26px;
    background-size: contain !important;
}
.single-item .slick-continue .mottiri > span {
    animation: blur 1s ease-out 1;
    animation-fill-mode: forwards;
}
.single-item .mottiri > span.mo1 {
    background: url(../img/animation/img-txt_mo.png) no-repeat 50% 50%;
    left: 25px;
    top: 51%;
}
.single-item .slick-continue .mottiri > span.mo1 {
    animation-delay: 0.1s;
}
.single-item .mottiri > span.mo2 {
    background: url(../img/animation/img-txt_fu.png) no-repeat 50% 50%;
    left: 58px;
    top: 54%;
}
.single-item .slick-continue .mottiri > span.mo2 {
    animation-delay: 0.6s;
}
.single-item .mottiri > span.mo3 {
    background: url(../img/animation/img-txt_mo.png) no-repeat 50% 50%;
    left: 100px;
    top: 51.5%;
}
.single-item .slick-continue .mottiri > span.mo3 {
    animation-delay: 1.1s;
}
.single-item .mottiri > span.mo4 {
    background: url(../img/animation/img-txt_fu.png) no-repeat 50% 50%;
    left: 135px;
    top: 53%;
}
.single-item .slick-continue .mottiri > span.mo4 {
    animation-delay: 1.6s;
}
.single-item .mottiri > span.mo5 {
    background: url(../img/animation/img-txt_tou.png) no-repeat 50% 50%;
    left: 175px;
    top: 57%;
}
.single-item .slick-continue .mottiri > span.mo5 {
    animation-delay: 2.1s;
}
.single-item .mottiri > span.mo6 {
    background: url(../img/animation/img-txt_mo.png) no-repeat 50% 50%;
    left: 205px;
    top: 51.5%;
}
.single-item .slick-continue .mottiri > span.mo6 {
    animation-delay: 2.6s;
}
.single-item .mottiri > span.mo7 {
    background: url(../img/animation/img-txt_tsu.png) no-repeat 50% 50%;
    left: 235px;
    top: 54%;
}
.single-item .slick-continue .mottiri > span.mo7 {
    animation-delay: 3.1s;
}
.single-item .mottiri > span.mo8 {
    background: url(../img/animation/img-txt_chi.png) no-repeat 50% 50%;
    left: 265px;
    top: 50%;
}
.single-item .slick-continue .mottiri > span.mo8 {
    animation-delay: 3.6s;
}
.single-item .mottiri > span.mo9 {
    background: url(../img/animation/img-txt_ri.png) no-repeat 50% 50%;
    left: 305px;
    top: 52%;
}
.single-item .slick-continue .mottiri > span.mo9 {
    animation-delay: 4.1s;
}
.single-item .mottiri > span.mo10 {
    background: url(../img/animation/img-txt_tou.png) no-repeat 50% 50%;
    left: 330px;
    top: 57%;
}
.single-item .slick-continue .mottiri > span.mo10 {
    animation-delay: 4.6s;
}
.single-item .mottiri > span.mo11 {
    background: url(../img/animation/img-txt_matless.png) no-repeat 100% 50%;
    width: 100%;
    left: unset;
    right: 20px;
    top: 62%;
}
.single-item .slick-continue .mottiri > span.mo11 {
    animation-delay: 5.6s;
}

@media (max-width: 320px) {
    .single-item .mottiri > span {
        width: 20px;
        height: 20px;
    }
    .single-item .mottiri > span.mo1 {
        left: 20px;
    }
    .single-item .mottiri > span.mo2 {
        left: 50px;
    }
    .single-item .mottiri > span.mo3 {
        left: 85px;
    }
    .single-item .mottiri > span.mo4 {
        left: 115px;
    }
    .single-item .mottiri > span.mo5 {
        left: 150px;
    }
    .single-item .mottiri > span.mo6 {
        left: 175px;
    }
    .single-item .mottiri > span.mo7 {
        left: 200px;
    }
    .single-item .mottiri > span.mo8 {
        left: 225px;
    }
    .single-item .mottiri > span.mo9 {
        left: 260px;
    }
    .single-item .mottiri > span.mo10 {
        left: 280px;
    }
}
@keyframes blur {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
    }
    50% {
        -webkit-transform: translate(0, -15px) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
    }
}
@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0) rotate(0);
    }
    50% {
        transform: translate(0, -15px) rotate(0deg);
    }
    100% {
        transform: translate(0, 0) rotate(0);
    }
}
@keyframes zoomIn {
    0% {
        transform: scale(1);
        z-index: 9;
    }
    100% {
        transform: scale(1.8);
        z-index: 9;
    }
}