@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-container__bg
**************************************************************/

@media all and (min-width: 768px) {
  .g-container__bg {
    animation-name: bg-anima;
    animation-duration: 16s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@media all and (max-width: 767px) {
  .g-container__bg {
    animation-name: bg-anima;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@keyframes bg-anima {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 100%;
  }
}

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


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

/* 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
**************************************************************/
.concept-contents.js-anima {
  opacity: initial;
}
.concept-contents.js-anima * {
  opacity: 0;
}


/* concept-contents-mask
********************************/
.concept-contents.js-anima .concept-contents-mask {
  opacity: initial;
}
.is-show .concept-contents-mask {
  animation-name: concept-mask;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes concept-mask {
  0% {
    left: 0;
    right: auto;
    width: 0;
  }
  50% {
    left: 0;
    right: auto;
    width: 100%;
  }
  75% {
    left: auto;
    right: 0;
    width: 100%;
  }
  100% {
    left: auto;
    right: 0;
    width: 0;
  }
}


/* concept-contents-photo
********************************/
.is-show .concept-contents-photo {
  animation-name: concept-photo;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes concept-photo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* concept-contents-info
********************************/
.is-show .concept-contents-info {
  animation-name: concept-info;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes concept-info {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* concept-contents-info__contents / concept-contents-info__des
********************************/
.is-show .concept-contents-info__contents,
.is-show .concept-contents-info__des
{
  animation-name: concept-info-des;
  animation-duration: 1s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes concept-info-des {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* c-head-container
********************************/
.is-show.concept-contents .c-head-container,
.is-show.concept-contents .c-head-vl-2
{
  animation-name: concept-head;
  animation-duration: 1s;
  animation-delay: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
@keyframes concept-head {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 見出し
**************************************************************/

/* h2-slideFadeInBg
********************************/
[data-anima="h2-slideFadeIn"] .c-head-vl-2__ttl-bg {
  width: 0;
  transition: all var(--transition-anima-speed);
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__ttl-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-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;
  }
}

/* h2-slideFadeInTtl
********************************/
[data-anima="h2-slideFadeIn"] .c-head-vl-2__tt-txt {
  opacity: 0;
  transition: all var(--transition-anima-speed);
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__tt-txt {
  animation-name: h2-slideFadeInTtl;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes h2-slideFadeInTtl {
  0%{
    opacity: 0;
    transform: translate(-3rem, 0);
  }
  100%{
    opacity: 1;
    transform: translate(0, 0);
  }
}


/* h2-slideFadeInTtlJp
********************************/
[data-anima="h2-slideFadeIn"] .c-head-vl-2__ttl.--jp {
  opacity: 0;
  transition: all var(--transition-anima-speed);
}
.is-show[data-anima="h2-slideFadeIn"] .c-head-vl-2__ttl.--jp {
  animation-name: h2-slideFadeInTtlJp;
  animation-duration: .5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes h2-slideFadeInTtlJp {
  0%{
    opacity: 0;
    transform: translate(-3rem, 0);
  }
  100%{
    opacity: 1;
    transform: translate(0, 0);
  }
}


/* loading-container
**************************************************************/

/* js-mv-intro-txt
********************************/
.loading-container .js-mv-intro-txt {
  opacity: 0;
  transition: all var(--transition-anima-speed);
}

.loading-container .is-show.js-mv-intro-txt {
  animation-name: mv-intro-txt-anima;
  animation-duration: 10s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}


@keyframes mv-intro-txt-anima {
  0% {
    opacity: 0;
    transform: translate(0, -3rem);
  }
  10% {
    opacity: 1;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  70% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    opacity: 1;
    transform: translate(0, 0);
  }
  90% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -3rem);
  }
}



/* js-mv-intro-bg
********************************/
.is-show.js-mv-intro-bg {
  animation-name: mv-intro-bg-anima;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes mv-intro-bg-anima {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* work
**************************************************************/

/* workList
********************************/
.work-list [data-anima="workList"] {
  opacity: initial;
}
.work-list [data-anima="workList"] .item__contents
{
  opacity: 0;
}
.work-list .is-show[data-anima="workList"] .item__contents {
  animation-name: workListShow;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
.work-list [data-anima="workList"] .item__shape {
  width: 0;
}
.work-list .is-show[data-anima="workList"] .item__shape {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}
.work-list .is-show[data-anima="workList"]:nth-child(odd) .item__shape {
  animation-name: workListLeft;
}
.work-list .is-show[data-anima="workList"]:nth-child(even) .item__shape {
  animation-name: workListRight;
}

@keyframes workListLeft {
  0%{
    left: 0;
    width: 0;
  }
  50%{
    left: 0;
    width: 100%;
  }
  75%{
    left: auto;
    right: 0;
    width: 100%;
  }
  100%{
    left: auto;
    right: 0;
    width: 0;
  }
}

@keyframes workListRight {
  0%{
    right: 0;
    width: 0;
  }
  50%{
    right: 0;
    width: 100%;
  }
  75%{
    left: 0;
    right: auto;
    width: 100%;
  }
  100%{
    left: 0;
    right: auto;
    width: 0;
  }
}


@keyframes workListShow {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}


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

/* 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);
}