@charset "utf-8";
/* CSS Document */


/* 基本のスタイル */
.foo.delighter {
transition: all .3000s ease-out;
 transform : translate(0px,20px);
opacity: 0;
}
/* スタート時のスタイル */
.foo.delighter.started {
transform: none;
opacity: 1;
}
/* エンド時のスタイル */
.foo.delighter.started.ended {
}



/* タイトル アニメーション */
.fooTtl.delighter {
 transition : all 1200ms;
 transform : translate(0px,30px);
 opacity: 0;
}
/* スタート時のスタイル */
.fooTtl.delighter.started {
 transform: none;
 opacity: 1;
}
/* エンド時のスタイル */
.fooTtl.delighter.started.ended {
}

/* タイトル アニメーション */
.fooTtl02.delighter {
 transition : all 400ms;
 transform : translate(0px,30px);
 opacity: 0;
}
/* スタート時のスタイル */
.fooTtl02.delighter.started {
 transform: none;
 opacity: 1;
}
/* エンド時のスタイル */
.fooTtl02.delighter.started.ended {
}


/* テキスト */
.fooTxt.delighter {
 transition : all 1200ms;
 transform : translate(0px,80px);
 opacity: 0;
}
/* スタート時のスタイル */
.fooTxt.delighter.started {
 transform: none;
 opacity: 1;
}
/* エンド時のスタイル */
.fooTxt.delighter.started.ended {
}



/* 左からスライド */
.fooSlide.delighter {
 transition : all 800ms cubic-bezier(0.42, 0, 1.0, 1.0) ;
 transform : translate(-500px,10px);
 opacity: 0;
 transition-delay: .1s;
}
/* スタート時のスタイル */
.fooSlide.delighter.started {
 transform: none;
 opacity: 1;

}
/* エンド時のスタイル */
.fooSlide.delighter.started.ended {

}


/* 左からスライド　ライン */
.fooLine.delighter {
 transition : all 400ms cubic-bezier(0.42, 0, 1.0, 1.0) ;
 transform : translate(-3000px,10px);
 opacity: 0;
 transition-delay: .1s;
}
/* スタート時のスタイル */
.fooLine.delighter.started {
 transform: none;
 opacity: 1;

}
/* エンド時のスタイル */
.fooLine.delighter.started.ended {
  /* border: 0.3em solid  rgb(40,50,99); */

}



/* bg */
.fooBg.delighter {
transition : all 800ms cubic-bezier(0.42, 0, 1.0, 1.0) ;
transform: scale(1.01, 1.01);
opacity: 0;
 transition-delay: .1s;
}
/* スタート時のスタイル */
.fooBg.delighter.started {
transform: none;
opacity: 1;
}
/* エンド時のスタイル */
.fooBg.delighter.started.ended {
}


/* bg2 */
.fooBg02.delighter {
transition: all 600ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
/* transition : all 1000ms; */
/* transform : scale(1,0); */
transform : translate(100px,0px);
opacity: 0;
transition-delay: .2s;
}
/* スタート時のスタイル */
.fooBg02.delighter.started {
transform: none;
opacity: 1;
}
/* エンド時のスタイル */
.fooBg02.delighter.started.ended {
}


/* 色付き写真背景 */

.moveBg.delighter{
  width: 100%;
  transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
  background-color: rgb(182,55,46);
  transform : translate(100px,0px);
  opacity: 0;
}

/* スタート時のスタイル */
.moveBg.delighter.started {
transform: none;
opacity: 1;

}
/* エンド時のスタイル */
.moveBg.delighter.started.ended {

}


.moveBg02.delighter{
  width: 100%;
  transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
  background-color: rgb(40,50,99);
  transform : translate(100px,0px);
  opacity: 0;
}

/* スタート時のスタイル */
.moveBg02.delighter.started {
transform: none;
opacity: 1;

}
/* エンド時のスタイル */
.moveBg02.delighter.started.ended {

}


/*横幅768px以下*/
@media screen and (max-width:768px){



  /* bg2 */
  .fooBg02.delighter {
  transition: all 600ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
  /* transition : all 1000ms; */
  /* transform : scale(1,0); */
  transform : translate(0px,30px);
  opacity: 0;
  transition-delay: .2s;
  }
  /* スタート時のスタイル */
  .fooBg02.delighter.started {
  transform: none;
  opacity: 1;
  }
  /* エンド時のスタイル */
  .fooBg02.delighter.started.ended {
  }




  /* 色付き写真背景 */

  .moveBg.delighter{
    width: 100%;
    transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
    background-color: rgb(182,55,46);
    transform : translate(0px,30px);
    opacity: 0;
  }

  /* スタート時のスタイル */
  .moveBg.delighter.started {
  transform: none;
  opacity: 1;

  }
  /* エンド時のスタイル */
  .moveBg.delighter.started.ended {

  }


  .moveBg02.delighter{
    width: 100%;
    transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
    background-color: rgb(40,50,99);
    transform : translate(0px,30px);
    opacity: 0;
  }

  /* スタート時のスタイル */
  .moveBg02.delighter.started {
  transform: none;
  opacity: 1;

  }
  /* エンド時のスタイル */
  .moveBg02.delighter.started.ended {

  }

}