@charset "utf-8";

video {
    width: 100%;
}

#top_animetion {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

#top_animetion #animetion_in {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 52.5%;
    background-color: #000;
    overflow: hidden;
    z-index: 0;
    will-change: animation;
}

#top_animetion #animetion_in>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 52.5%;
}

#animetion_in>div img,
#animetion_in>p,
#animetion_in>div div {
    opacity: 0;
}

/* キャプション */
/*[id^="scene_"] */
[id*="cap_"] {
    position: absolute;
    bottom: 5px;
    /*	right: 5px;*/
    left: 5px;
    color: #000;
    font-size: 11px;
    font-family: "游明朝 Medium", YuMincho Medium, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    -webkit-transform: rotate(.028deg);
    -ms-transform: rotate(.028deg);
    transform: rotate(.028deg);
    font-feature-settings: normal;
    letter-spacing: 1px;
    text-shadow: 2px 0 2px #fff, -2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff;
    z-index: 20;
}

/* 各シーン設定 */

#top_animetion #animetion_in>#scene_1 .img01_01 {
    position: absolute;
    top: 0%;
    left: 0;
    width: 150%;
    transform: translateX(0);
    z-index: 10;
    transition: 3s;
}

#top_animetion #animetion_in>#scene_1 .img01_01.action {
    transform: translateX(-7.5%);
}

#top_animetion #animetion_in>#scene_1 .img01_01.unset {
    transform: unset;
}



#top_animetion #animetion_in>#scene_1 .img01_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    /*    filter: blur(10px);*/
    /*    transform: scale(0.7);*/
    /*    transition: 1s;*/
}

/*
#top_animetion #animetion_in > #scene_1 .img01_02.blur{
    filter: blur(0);
    transform: scale(1.0);
}
*/
/*
#top_animetion #animetion_in > #scene_1 .img01_02.out{
    filter: blur(10px);
}
*/
#top_animetion #animetion_in>#scene_1 .img01_02.unset {
    filter: unset;
    transform: unset;
}




#top_animetion #animetion_in>#scene_2 .img02_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
}

#top_animetion #animetion_in>#scene_2 .img02_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 13;
}

#top_animetion #animetion_in>#scene_2 .img02_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 13;
}



#top_animetion #animetion_in>#scene_3 .img03_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 18;
}

#top_animetion #animetion_in>#scene_3 .img03_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 19;
}

#top_animetion #animetion_in>#scene_3 .img03_03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

#top_animetion #animetion_in>#scene_3 .img03_04 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 21;
}

#top_animetion #animetion_in>#scene_3 .img03_05 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 22;
}

#top_animetion #animetion_in>#scene_3 .img03_06 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 23;
}

#top_animetion #animetion_in>#scene_4 .img04_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 14;
}

#top_animetion #animetion_in>#scene_4 .img04_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 15;
}
#top_animetion #animetion_in>#scene_5 .img05_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 16;
}

#top_animetion #animetion_in>#scene_5 .img05_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 17;
}


#animetion_in>.scene02_cap {
    z-index: 13;
}

#animetion_in>.scene03_cap {
    z-index: 23;
}
#animetion_in>.scene04_cap {
    z-index: 15;
}
#animetion_in>.scene05_cap {
    z-index: 17;
}

#btnSkip,
#btnReplay {
    position: absolute;
    /*	bottom: 12px;*/
    bottom: 6px;
    /*	left: 10px;*/
    right: 10px;
    width: 90px;
    height: 20px;
}


/*=============================
spから
=============================*/
@media only screen and (max-width: 767px) {

    #top_animetion #animetion_in,
    #top_animetion #animetion_in>div {
        padding-top: 91.875%;
    }


    #btnSkip,
    #btnReplay {
        position: absolute;
        bottom: 12px;
        left: unset;
        right: 10px;
        width: calc(90px * 0.7);
        height: calc(20px * 0.7);
    }
}