@charset "utf-8";
/* CSS Document */


/* ------------- concept用 ------------- */

.concept-fadein00 {
  transform: scale(1.4) rotate(0deg);
  margin-top: 50px;
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 1.5s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
}

.concept-fadein00.active {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
}


.concept-fadein01{
  /*-webkit-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all .8s linear;*/
  transition: 1s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  transform: translateY(200px);
  opacity: 0;
}
.concept-fadein01.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.concept-fadein02{
  /*-webkit-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all .8s linear;*/
  transition: 1s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity: 0;
}
.concept-fadein02.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.concept-fadein03{
  /*-webkit-transition: all 1.2s ease-out;
  -o-transition: all 1.2s ease-out;
  transition: all 1.2s ease-out;*/
  transition: 1s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  transform: translateY(-100px);
  opacity: 0;
}
.concept-fadein03.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}


.concept-fadein04{
  /*-webkit-transition: all .8s ease-out;
  -o-transition: all .8s ease-out;
  transition: all .8s ease-out;*/
  transition: 1s cubic-bezier(.39, .575, .565, 1); /* easeOutSine */
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
  opacity: 0;
}
.concept-fadein04.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}




/* ------------- topimg用 ------------- */

.topimg {
    animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



/* ------------- member用 ------------- */

.member-fadein01 {
  transform: scale(1) rotate(0deg);
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 1s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
}

.member-fadein01.active {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.member-fadein02 {
  transform: scale(1) rotate(0deg);
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 2s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
}

.member-fadein02.active {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}


.member-fadein03 {
  transform: scale(1) rotate(0deg);
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 3s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
}

.member-fadein03.active {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
}

.member-fadein04 {
  transform: scale(1) rotate(0deg);
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 3s cubic-bezier(.4, 0, .2, 1); /* easeOutSine */
}

.member-fadein04.active {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}



/* ------------- コラム用 ------------- */


.column-fadein01{
opacity: 0;
}
.column-fadein01.active{
	  animation: column-fadein01 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes column-fadein01 {
	
  0% {
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}


.column-fadein02{
opacity: 0;
}
.column-fadein02.active{
	  animation: column-fadein02 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes column-fadein02 {
	
  0% {
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}




/* ------------- フェードイン ------------- */

.fadein{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  opacity: 0;
}
.fadein.active{
  opacity: 1;
}

.fadein_ver02 {
  transform: scale(1.2) rotate(0deg);
  margin-top: 100px;
  opacity: 0;
  /*transition: all 2.3s;*/
  transition: 1s cubic-bezier(0.77, 0, 0.175, 1); /* easeOutSine */
}

.fadein_ver02.active {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
}


/* ------------- 左からフェードイン ------------- */

.fadein-left{
opacity: 0;
}
.fadein-left.active{
	  animation: fadein-left 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-left {
	
  0% {
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}

/* ------------- 右からフェードイン ------------- */
.fadein-right{
opacity: 0;
}
.fadein-right.active{
	  animation: fadein-right 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-right {
	
  0% {
  -webkit-transform: translateX(200px);
  -moz-transform: translateX(200px);
  -ms-transform: translateX(200px);
  transform: translateX(200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}


/* ------------- ぼんやりフェードイン ------------- */

.blur-fadein{
    text-align: center;
    color: transparent;
}
.blur-fadein.active{
    animation: blurFadeIn 2.0s ease-in forwards;
}
@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: #000 1px 0px 20px ;
    }
    50% {
        opacity: 0.5;
        text-shadow: #000 1px 0px 10px ;
    }
    100% {
        opacity: 1;
        text-shadow: #000 0px 0px 0px ;
    }
}
	
/* ------------- 上から徐々に ------------- */


.roll-top{
  overflow: hidden;
  position: relative;
}

.roll-top:before {
  background:#fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.roll-top.active:before {
  animation: roll-top 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  
}

@keyframes roll-top {
  100% {
    transform: translateY(100%);
  }
}

/* ------------- 下から徐々に ------------- */


.roll-bottom{
  overflow: hidden;
  position: relative;
}

.roll-bottom:before {
  background:#fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.roll-bottom.active:before {
  animation: roll-bottom 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  
}

@keyframes roll-bottom {
  100% {
    transform: translateY(-100%);
  }
}



/* ------------- ↓以下activeなしアニメーション↓ ------------- */


/* ------------- フェードイン ------------- */

.fadein_ver02_start{
	animation: fadein_ver02_start 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}


@keyframes fadein_ver02_start {
	
  0% {
  transform: scale(1.4) rotate(0deg);
  opacity: 0;
}
	
  100% {
  transform: scale(1) rotate(0deg);
  margin-top: 0;
  opacity: 1;
  }
}

/* ------------- 左からフェードイン ------------- */

.fadein-left_start{
opacity: 0;
}
.fadein-left_start{
	  animation: fadein-left_start 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes fadein-left_start {
	
  0% {
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}