@charset "UTF-8";
/* trans_parentが必要ないように変更 */
.scrollIn{
    overflow : hidden;
}

.scrollBlock{
    overflow : hidden;
}
.scrollBlock .scrollIn{
    overflow : visible;
}

@scope( .scrollIn ){
    :scope{
        transition-duration : .3s;
    }
    
    .trans_child{
        transition-duration : .3s;
    }
    /* simove fadein */
    .scrollIn[data-simove*='fade-in'],
    .trans_child[data-simove*='fade-in']{
        opacity : 0;
    }
    .scrollIn.scrollActive[data-simove*='fade-in'],
    .scrollIn.scrollActive .trans_child[data-simove*='fade-in']{
        opacity : 1;
    }

    /* simove x-to-y */
    .scrollIn[data-simove*='l-to-r'],
    .trans_child[data-simove*='l-to-r']{
        transform : translateX(-50px);
    }
    .scrollIn.scrollActive[data-simove*='l-to-r'],
    .scrollIn.scrollActive .trans_child[data-simove*='l-to-r']{
        transform : translateX(0);
    }
    .scrollIn[data-simove*='r-to-l'],
    .trans_child[data-simove*='r-to-l']{
        transform : translateX(50px);
    }
    .scrollIn.scrollActive[data-simove*='r-to-l'],
    .scrollIn.scrollActive .trans_child[data-simove*='r-to-l']{
        transform : translateX(0);
    }
    .scrollIn[data-simove*='t-to-b'],
    .trans_child[data-simove*='t-to-b']{
        transform : translateY(-50px);
    }
    .scrollIn.scrollActive[data-simove*='t-to-b'],
    .scrollIn.scrollActive .trans_child[data-simove*='t-to-b']{
        transform : translateY(0);
    }
    .scrollIn[data-simove*='b-to-t'],
    .trans_child[data-simove*='b-to-t']{
        transform : translateY(50px);
    }
    .scrollIn.scrollActive[data-simove*='b-to-t'],
    .scrollIn.scrollActive .trans_child[data-simove*='b-to-t']{
        transform : translateY(0);
    }
}

/* simove fadein */
[data-simove*='fade-in']{
    opacity : 0;
}
.scrollActive[data-simove*='fade-in'],
.scrollActive .trans_child[data-simove*='fade-in']{
    opacity : 1;
}

/* simove x-to-y */
[data-simove*='l-to-r']{
    transform : translateX(-50px);
}
.scrollActive[data-simove*='l-to-r'],
.scrollActive .trans_child[data-simove*='l-to-r']{
    transform : translateX(0);
}
[data-simove*='r-to-l']{
    transform : translateX(50px);
}
.scrollActive[data-simove*='r-to-l'],
.scrollActive .trans_child[data-simove*='r-to-l']{
    transform : translateX(0);
}
[data-simove*='t-to-b']{
    transform : translateY(-50px);
}
.scrollActive[data-simove*='t-to-b'],
.scrollActive .trans_child[data-simove*='t-to-b']{
    transform : translateY(0);
}
[data-simove*='b-to-t']{
    transform : translateY(50px);
}
.scrollActive[data-simove*='b-to-t'],
.scrollActive .trans_child[data-simove*='b-to-t']{
    transform : translateY(0);
}


/* delay設定 グループに指定して動作をずらしたい場合に使用 */
[data-sidelay = "0.1"]{ transition-delay: 0.1s !important;}
[data-sidelay = "0.2"]{ transition-delay: 0.2s !important;}
[data-sidelay = "0.3"]{ transition-delay: 0.3s !important;}
[data-sidelay = "0.4"]{ transition-delay: 0.4s !important;}
[data-sidelay = "0.5"]{ transition-delay: 0.5s !important;}
[data-sidelay = "0.6"]{ transition-delay: 0.6s !important;}
[data-sidelay = "0.7"]{ transition-delay: 0.7s !important;}
[data-sidelay = "0.8"]{ transition-delay: 0.8s !important;}
[data-sidelay = "0.9"]{ transition-delay: 0.9s !important;}
[data-sidelay = "1.0"]{ transition-delay: 1.0s !important;}
[data-sidelay = "1.1"]{ transition-delay: 1.1s !important;}
[data-sidelay = "1.2"]{ transition-delay: 1.2s !important;}
[data-sidelay = "1.3"]{ transition-delay: 1.3s !important;}
[data-sidelay = "1.4"]{ transition-delay: 1.4s !important;}
[data-sidelay = "1.5"]{ transition-delay: 1.5s !important;}

[data-siduration = "0.1"]{ transition-duration: 0.1s !important; }
[data-siduration = "0.2"]{ transition-duration: 0.2s !important;}
[data-siduration = "0.3"]{ transition-duration: 0.3s !important;}
[data-siduration = "0.4"]{ transition-duration: 0.4s !important;}
[data-siduration = "0.5"]{ transition-duration: 0.5s !important;}
[data-siduration = "0.6"]{ transition-duration: 0.6s !important;}
[data-siduration = "0.7"]{ transition-duration: 0.7s !important;}
[data-siduration = "0.8"]{ transition-duration: 0.8s !important;}
[data-siduration = "0.9"]{ transition-duration: 0.9s !important;}
[data-siduration = "1.0"]{ transition-duration: 1.0s !important;}
[data-siduration = "1.1"]{ transition-duration: 1.1s !important;}
[data-siduration = "1.2"]{ transition-duration: 1.2s !important;}
[data-siduration = "1.3"]{ transition-duration: 1.3s !important;}
[data-siduration = "1.4"]{ transition-duration: 1.4s !important;}
[data-siduration = "1.5"]{ transition-duration: 1.5s !important;}

/* 動作をclassで指定していた時の名残 */
    @scope( .scrollIn ){
        :scope{
            transition-duration : .3s;
        }
    .move_r-to-l,
     .trans_child.move_r-to-l{
        transform : translateX(50px);
    }
    .move_r-to-l.scrollActive,
    .scrollActive .trans_child.move_r-to-l{
        transform : translateX(0);
    }
    .move_t-to-b,
     .trans_child.move_t-to-b{
        transform : translateY(-50px);
    }
    .move_t-to-b.scrollActive,
    .scrollActive .trans_child.move_t-to-b{
        transform : translateY(0);
    }
    .move_b-to-t,
     .trans_child.move_b-to-t{
        transform : translateY(50px);
    }
    .move_b-to-t.scrollActive,
    .scrollActive .trans_child.move_b-to-t{
        transform : translateY(0);
    }
    .move_l-to-r,
     .trans_child.move_l-to-r{
        transform : translateX(-50px);
    }
    .move_l-to-r.scrollActive,
    .scrollActive .trans_child.move_l-to-r{
        transform : translateX(0);
    }

    /* trans_parentが必要だったときの名残 */
    .trans_parent .trans_child{
        transition-duration : .3s;
    }
    .fade_in,
    .trans_parent .trans_child.fade_in{
        opacity : 0;
    }
    .fade_in.scrollActive,
    .trans_parent.scrollActive .trans_child.fade_in{
        opacity : 1;
    }
    [data-simove*='fade-in'],
    .trans_parent .trans_child[data-simove*='fade-in']{
        opacity : 0;
    }
    .scrollActive[data-simove*='fade-in'],
    .trans_parent.scrollActive .trans_child[data-simove*='fade-in']{
        opacity : 1;
    }
    .move_r-to-l,
    .trans_parent .trans_child.move_r-to-l{
        transform : translateX(50px);
    }
    .move_r-to-l.scrollActive,
    .trans_parent.scrollActive .trans_child.move_r-to-l{
        transform : translateX(0);
    }
    .move_t-to-b,
    .trans_parent .trans_child.move_t-to-b{
        transform : translateY(-50px);
    }
    .move_t-to-b.scrollActive,
    .trans_parent.scrollActive .trans_child.move_t-to-b{
        transform : translateY(0);
    }
    .move_b-to-t,
    .trans_parent .trans_child.move_b-to-t{
        transform : translateY(50px);
    }
    .move_b-to-t.scrollActive,
    .trans_parent.scrollActive .trans_child.move_b-to-t{
        transform : translateY(0);
    }
    [data-simove*='l-to-r'],
    .trans_parent .trans_child[data-simove*='l-to-r']{
        transform : translateX(-50px);
    }
    .scrollActive[data-simove*='l-to-r'],
    .trans_parent.scrollActive .trans_child[data-simove*='l-to-r']{
        transform : translateX(0);
    }
    [data-simove*='r-to-l'],
    .trans_parent .trans_child[data-simove*='r-to-l']{
        transform : translateX(50px);
    }
    .scrollActive[data-simove*='r-to-l'],
    .trans_parent.scrollActive .trans_child[data-simove*='r-to-l']{
        transform : translateX(0);
    }
    [data-simove*='t-to-b'],
    .trans_parent .trans_child[data-simove*='t-to-b']{
        transform : translateY(-50px);
    }
    .scrollActive[data-simove*='t-to-b'],
    .trans_parent.scrollActive .trans_child[data-simove*='t-to-b']{
        transform : translateY(0);
    }
    [data-simove*='b-to-t'],
    .trans_parent .trans_child[data-simove*='b-to-t']{
        transform : translateY(50px);
    }
    .scrollActive[data-simove*='b-to-t'],
    .trans_parent.scrollActive .trans_child[data-simove*='b-to-t']{
        transform : translateY(0);
    }
    .move_l-to-r,
    .trans_parent .trans_child.move_l-to-r{
        transform : translateX(-50px);
    }
    .move_l-to-r.scrollActive,
    .trans_parent.scrollActive .trans_child.move_l-to-r{
        transform : translateX(0);
    }
}
/* 遺物ここまで */