@charset "utf-8";

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

#top_animetion #animetion_in {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 54.5%;
    background-color: #fff;
    overflow: hidden;
    z-index: 0;
    /* will-change: animation; ←不要なら削除してOK */
}

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

/* 初期はアニメーション領域を非表示に（ボタンの画像は除外） */
#animetion_in>div>img,
#animetion_in>p,
#animetion_in>div>div {
    opacity: 0;
}

/* 常時表示：scene_0 / scene_0-1 は初期から可視 */
#scene_0 img,
#scene_0-1 img {
    opacity: 1;
}

/* ボタンは常時可視＋操作性向上 */
#btnSkip img,
#btnReplay img {
    opacity: 1 !important;
}

#btnSkip,
#btnReplay,
#btnSkip img,
#btnReplay img {
    cursor: pointer;
}

#btnSkip,
#btnReplay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 90px;
    height: 20px;
    z-index: 900;
}

/* キャプション（.cap_txt） */
#top_animetion #animetion_in .cap_txt {
    right: initial !important;
    left: 5px !important;
    bottom: 25px !important;
    opacity: 0;
    /* シーン表示時にJSで上げる */
}

/*=============================
 各シーン
=============================*/

/* シーン00 */
#top_animetion #animetion_in>#scene_0 .img00_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}


/* シーン01 */
#top_animetion #animetion_in>#scene_1 .img01_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#top_animetion #animetion_in>#scene_1-2 .img01_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    /* z-index: 22; */
}

#top_animetion #animetion_in>#scene_1 .cap_txt {
    position: relative;
    z-index: 15;
}

/* シーン02 */
#top_animetion #animetion_in>#scene_2 .img02_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 21;
}

#top_animetion #animetion_in>#scene_2-2 .img02_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 22;
    /* z-index: 32; */
}

#top_animetion #animetion_in>#scene_2 .cap_txt {
    position: relative;
    z-index: 25;
}

/* シーン03 */
#top_animetion #animetion_in>#scene_3 .img03_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 31;
}

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

#top_animetion #animetion_in>#scene_3 .cap_txt {
    position: relative;
    z-index: 35;
}

/* シーン04 */
#top_animetion #animetion_in>#scene_4 .img04_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}

#top_animetion #animetion_in>#scene_4 .cap_txt {
    position: relative;
    z-index: 45;
}

/* シーン05 */
#top_animetion #animetion_in>#scene_5 .img05_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
}

#top_animetion #animetion_in>#scene_5 .cap_txt {
    position: relative;
    z-index: 55;
}

/* シーン06 */
#top_animetion #animetion_in>#scene_6 .img06_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
}

#top_animetion #animetion_in>#scene_6 .cap_txt {
    position: relative;
    z-index: 65;
}

/* シーン07 */
#top_animetion #animetion_in>#scene_7 .img07_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 70;
}

#top_animetion #animetion_in>#scene_7-2 .img07_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 75;
}

#top_animetion #animetion_in>#scene_7 .cap_txt {
    position: relative;
    z-index: 75;
}

/* リプレイスキップボタンは非表示 */
#btnSkip,
#btnReplay {
    display: none !important;
}

/*=============================
 PC/SP 切替
=============================*/
.pc {
    display: block;
}

.sp {
    display: none;
}

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

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

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

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