@charset "UTF-8";

/* ==================== */
/* パララックス用記述
/* ==================== */

/* ===== その要素が画面に見えたら拡大縮小 ===== */
.scale_in{transition:all 0.3s;opacity:0;}
@keyframes scale_anim1 {
0%{-moz-transform:scale(0,0);-webkit-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);}
}
@keyframes scale_anim2 {
100%{-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(0,0);}
}

/* ===== その要素が画面に見えたら下からフェードイン ===== */
.fade_in{transition:all 0.3s;opacity:0;}
.fade_in{display:inline-block;}
@keyframes fadein_anim_top{
0%{transform:translateY(-50px);}
50%{transform:translateY(10px);}
100%{transform:translateY(0px);}
}
@keyframes fadein_anim_right{
0%{transform:translateX(50px);}
50%{transform:translateX(-10px);}
100%{transform:translateX(0px);}
}
@keyframes fadein_anim_bottom{
0%{transform:translateY(50px);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}
@keyframes fadein_anim_left{
0%{transform:translateX(-50px);}
50%{transform:translateX(10px);}
100%{transform:translateX(0px);}
}

/* ===== その要素が画面に見えたら横サイズが広がる ===== */
.wide_fade_in{overflow:hidden;position:relative;transition:all 1s;opacity:0;}
.wide_fade_in .hidden{content:"";display:block;width:100%;height:100%;margin:0 auto 0 0;position:absolute;top:0;bottom:0;background-color:#FFF;}
.wide_fade_in.from_right .hidden{left:0;}
.wide_fade_in.from_left .hidden{right:0;}
@keyframes wide_fade_in_anim{
0%{width:100%;}
100%{width:0;}
}
/*IE9*/
@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
.wide_fade_in .hidden{width:0;}
}

/* ===== その要素が画面に見えたらボーダーが要素の下にアニメーション ===== */
.border_in{display:inline-block;padding:0 0 10px;position:relative;}
.border_in::before{content:"";display:block;width:0%;height:5px;margin:auto auto 0;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;transition:all 0.3s;}
.border_in.border_in_anime{}
.border_in.border_in_anime::before{width:100%;}

/* ===== その要素が画面に見えたら囲み線がアニメーションで表示 ===== */
.border_all_in{display:inline-block;;position:relative;}
.border_all_in::before{content:"";display:block;width:0;height:0;box-sizing:border-box;position:absolute;top:0;left:0;border:3px solid transparent;}
.border_all_in::after{content:"";display:block;width:0;height:0;box-sizing:border-box;position:absolute;right:0;bottom:0;border:3px solid transparent;}
.border_all_in.border_all_in_anime{}
.border_all_in.border_all_in_anime::before{width:100%;height:100%;border-top-color:#000;border-right-color:#000;transition:width .25s ease-out,height .25s ease-out .25s;}
.border_all_in.border_all_in_anime::after{width:100%;height:100%;border-bottom-color:#000;border-left-color:#000;transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;}

/* =====
※囲み線の色を変更する場合は、以下のようにそのaタグの::beforeと::afterにそれぞれボーダーの色を指定する必要があります。
a::before{border-top-color:#123456;border-right-color:#123456;}
a::after{border-bottom-color:#123456;border-left-color:#123456;}
=====　*/

/* ===== スクロールで背景色を変更 ===== */
.bg_change{width:0;height:0;}

/* ===== ストーカー要素 ===== */
.stalker{transition:all 0.3s;-webkit-transition:all 0.3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;}