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

.scrollInBox{
    overflow : hidden;
}
.scrollInBox .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);
}
[data-simove*='45deg' ]{rotate :  45deg;}
[data-simove*='90deg' ]{rotate :  90deg;}
[data-simove*='-45deg']{rotate : -45deg;}
[data-simove*='-90deg']{rotate : -90deg;}

.scrollActive[data-simove*='45deg'],
.scrollActive .trans_child[ data-simove*='45deg'],
.scrollActive[data-simove*='90deg'],
.scrollActive .trans_child[ data-simove*='90deg'],
.scrollActive[data-simove*='-45deg'],
.scrollActive .trans_child[data-simove*='-45deg'],
.scrollActive[data-simove*='-90deg'],
.scrollActive .trans_child[data-simove*='-90deg']{
    rotate : 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);
    }
}
/* 遺物ここまで */