@charset "UTF-8";
/* 新規サイトスターターキット CSS */

/******************
スクロールしたらフェードインさせる
******************/
.Fade-FadeIn01 {
opacity: 0;
transition: 1.0s;
}
.FadeIn01 {
opacity: 1;
}

/******************
スクロールしたら上へ移動してフェードインさせる
******************/
.Fade-MoveUp01 {
transform: translate(0,20px); 
-webkit-transform: translate(0,20px);
opacity: 0;
}
.MoveUp01 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.0s;
}

.Fade-MoveUp02 {
transform: translate(0,40px); 
-webkit-transform: translate(0,40px);
opacity: 0;
}
.MoveUp02 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.5s;
}

/******************
スクロールしたら左へ移動してフェードインさせる
******************/
.Fade-MoveLeft01 {
transform: translate(25px,0); 
-webkit-transform: translate(25px,0);
opacity: 0;
}
.MoveLeft01 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.0s;
}

.Fade-MoveLeft02 {
transform: translate(300px,0); 
-webkit-transform: translate(300px,0);
opacity: 0;
}
.MoveLeft02 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 2.5s;
}
/******************
スクロールしたら右へ移動してフェードインさせる
******************/
.Fade-MoveRight01 {
transform: translate(-25px,0); 
-webkit-transform: translate(-25px,0);
opacity: 0;
}
.MoveRight01 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.0s;
}

.Fade-MoveRight02 {
transform: translate(-300px,0); 
-webkit-transform: translate(-300px,0);
opacity: 0;
}
.MoveRight02 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 2.5s;
}

/******************
スクロールしたら下へ移動してフェードインさせる
******************/
.Fade-MoveDown01 {
transform: translate(0,-20px); 
-webkit-transform: translate(0,-20px);
opacity: 0;
}
.MoveDown01 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.0s;
}

.Fade-MoveDown02 {
transform: translate(0,-100px); 
-webkit-transform: translate(0,-100px);
opacity: 0;
}
.MoveDown02 {
transform: translate(0,0); 
-webkit-transform: translate(0,0);
opacity: 1;
transition: 1.0s;
}

/******************
スクロールしたらズームアウトさせる
******************/
.Zoom-ZoomOut01{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
opacity: 0;
}
.ZoomOut01{
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: 1.0s;
opacity: 1;
}

/******************
スクロールしたらズームインさせる
******************/
.Zoom-ZoomIn01{
transform: scale(0.9, 0.9); /*0.7*/
-webkit-transform: scale(0.9, 0.9);
opacity: 0;
}
.ZoomIn01{
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transition: 1.0s;
opacity: 1;
}

/******************
スクロールしたらぼかしを解除させる
******************/
.Fade-Blur01{
-webkit-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
opacity: 0;
}
.Blur01{
-webkit-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
transition: 1.0s;
opacity: 1;
}