@charset "utf-8";

/* ロード・スクロール エフェクト設定
--------------------------------------------------------------*/

/* 基本 ---------- */

.anim {
  opacity: 0;
  -webkit-transition: opacity .7s, transform .7s;
    -moz-transition: opacity .7s, transform .7s;
    -o-transition: opacity .7s, transform .7s;
  transition: opacity .7s, transform .7s;
}

.anim.load01 {
  opacity: 1;
}

/* ディレイ設定 ---------- */

.anim.anim_delay01,
.anim.anim_delay01::before,
.anim.anim_delay01::after {
  transition-delay: .1s !important;
}

.anim.anim_delay02,
.anim.anim_delay02::before,
.anim.anim_delay02::after {
  transition-delay: .2s !important;
}

.anim.anim_delay03,
.anim.anim_delay03::before,
.anim.anim_delay03::after {
  transition-delay: .3s !important;
}

.anim.anim_delay04,
.anim.anim_delay04::before,
.anim.anim_delay04::after {
  transition-delay: .4s !important;
}

.anim.anim_delay05,
.anim.anim_delay05::before,
.anim.anim_delay05::after {
  transition-delay: .5s !important;
}

.anim.anim_delay06,
.anim.anim_delay06::before,
.anim.anim_delay06::after {
  transition-delay: .6s !important;
}

.anim.anim_delay07,
.anim.anim_delay07::before,
.anim.anim_delay07::after {
  transition-delay: .7s !important;
}

.anim.anim_delay08,
.anim.anim_delay08::before,
.anim.anim_delay08::after {
  transition-delay: .8s !important;
}

.anim.anim_delay09,
.anim.anim_delay09::before,
.anim.anim_delay09::after {
  transition-delay: .9s !important;
}

.anim.anim_delay10,
.anim.anim_delay10::before,
.anim.anim_delay10::after {
  transition-delay: 1s !important;
}

.anim.anim_delay11,
.anim.anim_delay11::before,
.anim.anim_delay11::after {
  transition-delay: 1.1s !important;
}

.anim.anim_delay12,
.anim.anim_delay12::before,
.anim.anim_delay12::after {
  transition-delay: 1.2s !important;
}

.anim.anim_delay13,
.anim.anim_delay13::before,
.anim.anim_delay13::after {
  transition-delay: 1.3s !important;
}

.anim.anim_delay14,
.anim.anim_delay14::before,
.anim.anim_delay14::after {
  transition-delay: 1.4s !important;
}

.anim.anim_delay15,
.anim.anim_delay15::before,
.anim.anim_delay15::after {
  transition-delay: 1.5s !important;
}

.anim.anim_delay16,
.anim.anim_delay16::before,
.anim.anim_delay16::after {
  transition-delay: 1.6s !important;
}

.anim.anim_delay17,
.anim.anim_delay17::before,
.anim.anim_delay17::after {
  transition-delay: 1.7s !important;
}

.anim.anim_delay18,
.anim.anim_delay18::before,
.anim.anim_delay18::after {
  transition-delay: 1.8s !important;
}

.anim.anim_delay19,
.anim.anim_delay19::before,
.anim.anim_delay19::after {
  transition-delay: 1.9s !important;
}

.anim.anim_delay20,
.anim.anim_delay20::before,
.anim.anim_delay20::after {
  transition-delay: 2.0s !important;
}

/* 上からフェードイン ---------- */

.fade_upper {
  -webkit-transform: translateY(-80px);
     -moz-transform: translateY(-80px);
      -ms-transform: translateY(-80px);
       -o-transform: translateY(-80px);
          transform: translateY(-80px);
}

.fade_upper.load01 {
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

/* 下からフェードイン ---------- */

.fade_under {
  -webkit-transform: translateY(80px);
     -moz-transform: translateY(80px);
      -ms-transform: translateY(80px);
       -o-transform: translateY(80px);
          transform: translateY(80px);
}

.fade_under.load01 {
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

/* 右からフェードイン ---------- */

.fade_right {
  -webkit-transform: translateX(80px);
     -moz-transform: translateX(80px);
      -ms-transform: translateX(80px);
       -o-transform: translateX(80px);
          transform: translateX(80px);
}

.fade_right.load01 {
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}

/* 左からフェードイン ---------- */

.fade_left {
  -webkit-transform: translateX(-80px);
     -moz-transform: translateX(-80px);
      -ms-transform: translateX(-80px);
       -o-transform: translateX(-80px);
          transform: translateX(-80px);
}

.fade_left.load01 {
  -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
      -ms-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}


/* SP */
@media screen and (max-width: 767px) {

  /* ディレイ設定 ---------- */

  .anim.anim_delay01,
  .anim.anim_delay01::before,
  .anim.anim_delay01::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay02,
  .anim.anim_delay02::before,
  .anim.anim_delay02::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay03,
  .anim.anim_delay03::before,
  .anim.anim_delay03::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay04,
  .anim.anim_delay04::before,
  .anim.anim_delay04::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay05,
  .anim.anim_delay05::before,
  .anim.anim_delay05::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay06,
  .anim.anim_delay06::before,
  .anim.anim_delay06::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay07,
  .anim.anim_delay07::before,
  .anim.anim_delay07::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay08,
  .anim.anim_delay08::before,
  .anim.anim_delay08::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay09,
  .anim.anim_delay09::before,
  .anim.anim_delay09::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay10,
  .anim.anim_delay10::before,
  .anim.anim_delay10::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay11,
  .anim.anim_delay11::before,
  .anim.anim_delay11::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay12,
  .anim.anim_delay12::before,
  .anim.anim_delay12::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay13,
  .anim.anim_delay13::before,
  .anim.anim_delay13::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay14,
  .anim.anim_delay14::before,
  .anim.anim_delay14::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay15,
  .anim.anim_delay15::before,
  .anim.anim_delay15::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay16,
  .anim.anim_delay16::before,
  .anim.anim_delay16::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay17,
  .anim.anim_delay17::before,
  .anim.anim_delay17::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay18,
  .anim.anim_delay18::before,
  .anim.anim_delay18::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay19,
  .anim.anim_delay19::before,
  .anim.anim_delay19::after {
    transition-delay: 0 !important;
  }

  .anim.anim_delay20,
  .anim.anim_delay20::before,
  .anim.anim_delay20::after {
    transition-delay: 0 !important;
  }

}