@charset "utf-8";
/* =========================================================
   common.css：@keyframes・アニメーション定義のみ
========================================================= */

@keyframes opa_on  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes opa_off { 0% { opacity: 1; } 100% { opacity: 0; } }

/* オープニング */
.wrap_off { opacity: 0; }
.wrap_on  { animation: opa_on 0.8s ease-in-out forwards; }

/* ローディング */
.loading .animTitle span { opacity: 0; }
.loading.is-run .animTitle span { opacity: 1; transition: opacity 2500ms; }
.loading.is-run .animTitle span:nth-of-type(2) { transition-delay: 70ms; }
.loading.is-run .animTitle span:nth-of-type(3) { transition-delay: 140ms; }
.loading.is-run .animTitle span:nth-of-type(4) { transition-delay: 210ms; }
.loading.is-run .animTitle span:nth-of-type(5) { transition-delay: 280ms; }
.loading.is-run .animTitle span:nth-of-type(6) { transition-delay: 350ms; }
.loading.is-run .animTitle span:nth-of-type(7) { transition-delay: 420ms; }
.loading.is-run .animTitle span:nth-of-type(8) { transition-delay: 490ms; }
.loading.is-run .animTitle span:nth-of-type(9) { transition-delay: 560ms; }
.loading.is-run .animTitle span:nth-of-type(10) { transition-delay: 630ms; }
.loading.is-run .animTitle span:nth-of-type(11) { transition-delay: 700ms; }
.loading.is-run .animTitle span:nth-of-type(12) { transition-delay: 770ms; }
.loading.loading_off { animation: opa_off 1.2s 0.5s ease-in-out forwards; }
.loading.loading_off .animTitle { animation: opa_off 0.8s ease-in-out forwards; }
.loading.loading_off2 { display: none; }

/* メニュー開閉 */
.menu_off .menu { animation: opa_off 0.5s ease-in-out forwards; }
.menu_on  .menu { animation: opa_on  0.5s ease-in-out forwards; }

/* MVスライダー */
@keyframes mv_fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes mv_zoom {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mv_slide.slide_on,
.mv_slide.slide_off { animation: mv_fade 1.2s ease-in-out forwards; }
.mv_slide.slide_first { animation: none; opacity: 1; }
.mv_slide.slide_on img,
.mv_slide.slide_off img { animation: mv_zoom 10s linear forwards; }

/* スクロールフェードイン */
.fadein {
  opacity: 0;
  transform: translateY(3rem);
}
.fadein.scrollin {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.165, .84, .44, 1);
}