@charset "utf-8";
/*-----------------------------
　　css
------------------------------*/


.kouetsu_01b ,
.kouetsu_02b ,
.kouetsu_03b ,
.kouetsu_04b ,
.kouetsu_05b {
    background-image: none;
    width: 495px;
    height: 140px;
    margin: 0 0 30px 90px;
    position: relative;
}
.kouetsu_box .sticky,
.kouetsu_box .sticky-bg{
  position: absolute;
  top:0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.kouetsu_box .sticky{
  background-position: 0 0;
}
.kouetsu_box .sticky-bg{
  background-position: 15px 15px;
  background-image: url(../images/intro/kouetsu_shadow.png);
}
.kouetsu_box .kouetsu_01b .sticky{ background-image: url(../images/intro/kouetsu_01b.png);}
.kouetsu_box .kouetsu_02b .sticky{ background-image: url(../images/intro/kouetsu_02b.png);}
.kouetsu_box .kouetsu_03b .sticky{ background-image: url(../images/intro/kouetsu_03b.png);}
.kouetsu_box .kouetsu_04b .sticky{ background-image: url(../images/intro/kouetsu_04b.png);}
.kouetsu_box .kouetsu_05b .sticky{ background-image: url(../images/intro/kouetsu_05b.png);}


/* header animation
--------------------------------------- */
#header{
  opacity: 0;
}

#header h1{
  opacity: 0;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-transition: all 0.6s ease-out 0.5s;
  transition: all 0.6s ease-out 0.5s;
}
#header.is-active h1{
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}



#header .main_syuen{
  opacity: 0;
  -webkit-transform: scale(1.2) rotate(20deg);
  transform: scale(1.2) rotate(20deg);
  -webkit-transition: all 0.5s ease-out 0.9s;
  transition: all 0.5s ease-out 0.9s;
}

#header.is-active .main_syuen{
  opacity: 1;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}


#header .main_oa{
  opacity: 0;
  -webkit-transition: all 1.0s ease-out 1.3s;
  transition: all 1.0s ease-out 1.3s;
}

#header.is-active .main_oa{
  opacity: 1;
}

/* animate
--------------------------------------- */
/* 初期は透明 */
.inview-01,
.inview-02{
	opacity: 0;
}

.animated {
  opacity: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.bounceIn,
.animated.bounceOut {
	  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}



@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
  	 opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
  	 opacity: 1;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
  	 opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
  	opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
  	opacity: 1;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
  	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
	  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}







.inview-sticky{
	-webkit-perspective: 200px;
	perspective: 200px;
}
.sticky,
.sticky-bg{
	opacity: 0;
	-webkit-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}

.inview-sticky .sticky{
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: translate(-50px, -10px) rotateX(5deg) rotateY(-7deg);
	-ms-transform: translate(-50px, -10px) rotateX(5deg) rotateY(-7deg);
	-o-transform: translate(-50px, -10px) rotateX(5deg) rotateY(-7deg);
	transform: translate(-50px, -10px) rotateX(5deg) rotateY(-7deg);
}
.inview-sticky.is-active .sticky{
	opacity: 1;
	-webkit-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
}

.inview-sticky .sticky-bg{
	-webkit-filter: blur(20px);
	filter: blur(20px);
}
.inview-sticky.is-active .sticky-bg{
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
}