@charset "utf-8";

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


/**************************************************************
* 共通
**************************************************************/


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


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


/**************************************************************
* G-HEADER
**************************************************************/
@media all and (min-width: 768px) {
  .is-fixed.g-header {
    animation-name: g-header-fixed;
    animation-duration: .5s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
  }
}
@keyframes g-header-fixed {
  0% {
    transform: translate(0, -10rem);
  }
  100% {
    transform: translate(0, 0);
  }
}


/**************************************************************
* G-NAV
**************************************************************/


/* 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;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/**************************************************************
* C-HEAD
**************************************************************/


/* 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,
.c-head-vl-2__link
{
  opacity: 0;
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__en,
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__jp,
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__link
{
  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;
  }
}

/* h3-slideFadeInBg
********************************/
[data-anima="h3-slideFadeIn"] .c-head-vl-3__bg {
  width: 0;
  transition: all var(--transition-anima-speed);
}
.c-head-vl-3__en,
.c-head-vl-3__jp
{
  opacity: 0;
}
.is-show[data-anima="h3-slideFadeIn"] .c-head-vl-3__en,
.is-show[data-anima="h3-slideFadeIn"] .c-head-vl-3__jp
{
  animation-name: h3-show;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
.is-show[data-anima="h3-slideFadeIn"] .c-head-vl-3__bg {
  animation-name: h3-slideFadeInBg;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes h3-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes h3-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, 6rem);
}
.is-show[data-anima="fadeInUp"] {
  opacity: 1;
  transform: translate(0, 0);
}


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


/************************************************************************************************
* CONCEPTページ
************************************************************************************************/

/**************************************************************
* COMMITMENT
**************************************************************/
.is-show.commitment-diagonal-shape {
  animation-name: commitment-diagonal-shape;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes commitment-diagonal-shape {
  0% {
    opacity: 1;
    padding-top: 0;
  }
  100% {
    opacity: 1;
    padding-top: 77.2rem;
  }
}