@charset "utf-8";

/**************************************************************
* アニメーション設定
**************************************************************/

/* js-anima
**************************************************************/
.js-anima {
  opacity: 0;
  transition: all var(--transition-anima-speed);
}


/* data-anima-init
**************************************************************/
[data-anima-init="true"] {
  opacity: initial;
}


/* mv
**************************************************************/


/* g-nav-container
**************************************************************/
.is-open .g-nav-container {
  animation-name: g-header-logo-show;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes g-header-logo-show {
  0% {
    opacity: 0;
    /* transform: translate(-50%, -60%); */
  }
  50% {
    opacity: 0;
    /* transform: translate(-50%, -60%); */
  }
  100% {
    opacity: 1;
    /* transform: translate(-50%, -50%); */
  }
}


/* concept
**************************************************************/


/* c-head-container
**************************************************************/

/* h2-slideFadeInBg
********************************/
[data-anima="h2-slideFadeIn"] .c-head-vl-2__bg {
  width: 0;
  transition: all var(--transition-anima-speed);
}
.c-head-vl-2__en,
.c-head-vl-2__jp
{
  opacity: 0;
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__en,
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__jp
{
  animation-name: h2-show;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__bg {
  animation-name: h2-slideFadeInBg;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes h2-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes h2-slideFadeInBg {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  75% {
    left: auto;
    right: 0;
    width: 100%;
  }
  100% {
    left: auto;
    right: 0;
    width: 0;
  }
}


/* 汎用アニメーション
**************************************************************/

/* fadeIn
********************************/
.is-show[data-anima="fadeIn"] {
  opacity: 1;
}

/* fadeInLeft
********************************/
[data-anima="fadeInLeft"] {
  transform: translate(-6rem, 0);
}
.is-show[data-anima="fadeInLeft"] {
  opacity: 1;
  transform: translate(0, 0);
}

/* fadeInRight
********************************/
[data-anima="fadeInRight"] {
  transform: translate(6rem, 0);
}
.is-show[data-anima="fadeInRight"] {
  opacity: 1;
  transform: translate(0, 0);
}

/* fadeInUp
********************************/
[data-anima="fadeInUp"] {
  transform: translate(0, 3rem);
}
.is-show[data-anima="fadeInUp"] {
  opacity: 1;
  transform: translate(0, 0);
}

/* fadeInDown
********************************/
[data-anima="fadeInDown"] {
  transform: translate(0, -3rem);
}
.is-show[data-anima="fadeInDown"] {
  opacity: 1;
  transform: translate(0, 0);
}