/*************************************************

写真のモーション

**************************************************/
.js-look-photo {
    -webkit-transition: opacity 1s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
    transition: opacity 1s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
    transition: transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1), opacity 1s ease-out;
    transition: transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1), opacity 1s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
    -webkit-transform: translate3d(60px, 120px, 0) skew(0deg, 2deg);
    transform: translate3d(60px, 120px, 0) skew(0deg, 2deg);
    opacity: 0;
}
.js-look-photo.is-visible {
    -webkit-transform: translate3d(0, 0, 0) skew(0deg, 0deg);
    transform: translate3d(0, 0, 0) skew(0deg, 0deg);
    opacity: 1;
}


/*************************************************

画像のモーション

**************************************************/
#color_change {
  position: relative;
  max-width: 768px;
  margin: 10px auto;
}
#color_change {
  -webkit-transition: opacity 2s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
  transition: opacity 2s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
  transition: transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1), opacity 1s ease-out;
  transition: transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1), opacity 1s ease-out, -webkit-transform 1.6s cubic-bezier(0.05, 0.45, 0.6, 1);
  -webkit-  transform: translate3d(-9999px, 0px, 0) skew(0deg, 2deg);
  transform: translate3d(-9999px, 0px, 0) skew(0deg, 2deg);

  opacity: 0;
}
#color_change .box-title.gray {
  display: none;
  opacity: 0;
}
#color_change.is-visible {
  -webkit-transform: translate3d(0, 0, 0) skew(0deg, 0deg);
  transform: translate3d(0, 0, 0) skew(0deg, 0deg);
  opacity: 1;
}
#color_change .box-title.color.is-hide {
  opacity: 0;
  transition-duration: 1s;
}
#color_change .box-title.gray.is-visible {
  display: block;
  opacity: 0.047;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation-duration: 1s;
    animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fade-in;
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 0.047;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 0.047;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 0.047;
      }
    }




/*
前の状態
 */
 /* #color_change {
   position: relative;
 }
 #color_change .box-title.gray.is-visible {
     opacity: 0.047;
     opacity: 0.047;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
 }
 #color_change .anim-fade.is-visible {
   opacity: 1;
 }
 #color_change .anim-fade {
   -webkit-transition: opacity 0.8s ease-out;
   transition: opacity 0.8s ease-out;
   opacity: 0;
 } */
/*************************************************

テキストのモーション

**************************************************/
.js-look-description {
  opacity: 0;
  max-width: 768px;
  margin: 10px auto;
}
.js-look-description.is-visible {
  opacity: 1;
  transition-duration: 2s;
}