/******************
h1 animation
*******************/
/* 【設定方法 / PC】
1.アニメーションさせたい親要素に「.target」を指定してください。
2.アニメーションさせたい要素に「fade-in」や「delay」等の設定をしてください。

【サンプル】
<div class="target">
	<p class="main_visual fadein_normal">
		<img src="https://placehold.jp/1040x520.png" alt="">
	</p>
</div> */
/* 【設定方法 / SP】
1.アニメーションさせたい要素に「.target_sp」、「fade-in」、「delay」等の設定をしてください。
2.横並びの要素で同時に要素を出したくない時は「delay」を上手く駆使しましょう。
※SP用の設定には「_sp」が語尾についております。

【サンプル】
<p class="full_movie_text target_sp fadein_normal_sp">動画の上にのテキストが入ります。</p>*/
/******************
h2 初期設定
*******************/
.fadein_normal,
.fadein_normal_sp,
.fadein_top,
.fadein_top_sp,
.fadein_right,
.fadein_right_sp,
.fadein_bottom,
.fadein_bottom_sp,
.fadein_left,
.fadein_left_sp,
.fadein_top_left,
.fadein_top_left_sp,
.fadein_top_right,
.fadein_top_right_sp,
.fadein_bottom_left,
.fadein_bottom_left_sp {
  opacity: 0;
}
/*********初期設定*********/
/******************
h2 delayの設定(PC)
*******************/
.target .delay_2 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.target .delay_4 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.target .delay_6 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.target .delay_8 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.target .delay_10 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.target .delay_12 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.target .delay_14 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.target .delay_16 {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.target .delay_18 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}
.target .delay_20 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.target .delay_22 {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}
.target .delay_24 {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.target .delay_26 {
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}
.target .delay_28 {
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
}
.target .delay_30 {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.target .delay_32 {
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}
.target .delay_34 {
  -webkit-animation-delay: 3.4s;
  animation-delay: 3.4s;
}
.target .delay_36 {
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}
.target .delay_38 {
  -webkit-animation-delay: 3.8s;
  animation-delay: 3.8s;
}
.target .delay_40 {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
/******************
h2 delayの設定(SP)
*******************/
@media screen and (max-width: 767px) {
  .target_sp.delay_0_sp {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .target_sp.delay_2_sp {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .target_sp.delay_4_sp {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .target_sp.delay_6_sp {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  .target_sp.delay_8_sp {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }
  .target_sp.delay_10_sp {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .target_sp.delay_12_sp {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }
  .target_sp.delay_14_sp {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
  }
  .target_sp.delay_16_sp {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
  }
  .target_sp.delay_18_sp {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
  }
  .target_sp.delay_20_sp {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  .target_sp.delay_22_sp {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
  }
  .target_sp.delay_24_sp {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
  }
  .target_sp.delay_26_sp {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
  }
  .target_sp.delay_28_sp {
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
  }
  .target_sp.delay_30_sp {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  .target_sp.delay_32_sp {
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
  }
  .target_sp.delay_34_sp {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
  }
  .target_sp.delay_36_sp {
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
  }
  .target_sp.delay_38_sp {
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
  }
  .target_sp.delay_40_sp {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
}
/*********delayの設定*********/
/******************
h2 fadeinの設定(PC)
*******************/
/******************
h3 fadein_normal
*******************/
.isAnimation .fadein_normal {
  -webkit-animation-name: fadeinNomal;
  animation-name: fadeinNomal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_normal_sp {
    -webkit-animation-name: fadeinNomal;
    animation-name: fadeinNomal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_normal*********/
/******************
h3 fadein_top
*******************/
.isAnimation .fadein_top {
  -webkit-animation-name: fadeinTop;
  animation-name: fadeinTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_top_sp {
    -webkit-animation-name: fadeinTop;
    animation-name: fadeinTop;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_top*********/
/******************
h3 fadein_right
*******************/
.isAnimation .fadein_right {
  -webkit-animation-name: fadeinRight;
  animation-name: fadeinRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_right_sp {
    -webkit-animation-name: fadeinRight;
    animation-name: fadeinRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_right*********/
/******************
h3 fadein_bottom
*******************/
.isAnimation .fadein_bottom {
  -webkit-animation-name: fadeinBottom;
  animation-name: fadeinBottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_bottom_sp {
    -webkit-animation-name: fadeinBottom;
    animation-name: fadeinBottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_bottom*********/
/******************
h3 fadein_left
*******************/
.isAnimation .fadein_left {
  -webkit-animation-name: fadeinLeft;
  animation-name: fadeinLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_left_sp {
    -webkit-animation-name: fadeinLeft;
    animation-name: fadeinLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_left*********/
/******************
h3 fadein_top_left
*******************/
.isAnimation .fadein_top_left {
  -webkit-animation-name: fadeinTopLeft;
  animation-name: fadeinTopLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_top_left_sp {
    -webkit-animation-name: fadeinTopLeft;
    animation-name: fadeinTopLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_top_left*********/
/******************
h3 fadein_top_right
*******************/
.isAnimation .fadein_top_right {
  -webkit-animation-name: fadeinTopRight;
  animation-name: fadeinTopRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_top_right_sp {
    -webkit-animation-name: fadeinTopRight;
    animation-name: fadeinTopRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_top_right*********/
/******************
h3 fadein_bottom_left
*******************/
.isAnimation .fadein_bottom_left {
  -webkit-animation-name: fadeinBottomLeft;
  animation-name: fadeinBottomLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_bottom_left_sp {
    -webkit-animation-name: fadeinBottomLeft;
    animation-name: fadeinBottomLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_bottom_left*********/
/******************
h3 fadein_bottom_right
*******************/
.isAnimation .fadein_bottom_right {
  -webkit-animation-name: fadeinBottomRight;
  animation-name: fadeinBottomRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
  .isAnimation_sp.fadein_bottom_right_sp {
    -webkit-animation-name: fadeinBottomRight;
    animation-name: fadeinBottomRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}
/*********fadein_bottom_right*********/

/*********fadeinの設定*********/
/*********animation*********/
@-webkit-keyframes fadeinNomal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinNomal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeinTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeinTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeinRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeinRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeinBottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeinBottom {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeinLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeinLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeinTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-100px, -100px);
    transform: translate(-100px, -100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes fadeinTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-100px, -100px);
    transform: translate(-100px, -100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@-webkit-keyframes fadeinTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate(100px, -100px);
    transform: translate(100px, -100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes fadeinTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate(100px, -100px);
    transform: translate(100px, -100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@-webkit-keyframes fadeinBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-100px, 100px);
    transform: translate(-100px, 100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes fadeinBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-100px, 100px);
    transform: translate(-100px, 100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@-webkit-keyframes fadeinBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes fadeinBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}