@charset "UTF-8";
/*****************************************************************************
custom area
*****************************************************************************/

  /*--------------------------
	text animation
	----------------------------*/
	  [data-scltext]>span{
		-webkit-transition-property:opacity;
	  transition-property:opacity;
	  -webkit-transition-duration : 0s;
		-o-transition-duration : 0s;
		transition-duration : 0s;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 1000px;
		perspective: 1000px;
		display: inline-block;
		opacity: 0;
	  }

	/*textA ------------------------------------------------*/

	  .textA[data-scltext="textA"]>span{
		opacity: 0;
		-webkit-transform: rotate(0) skew(-20deg, -10deg) translate3d(0em, .5em, 0) scale(3, 3);
		transform: rotate(0) skew(-20deg, -10deg) translate3d(0em, 0.5em, 0) scale(3, 3);
	  }

	  .textA[data-scltext="textA"].animated>span{
		-webkit-transition-property:all;
		transition-property:all;
		  -webkit-transition-duration : 1s;
		  -o-transition-duration : 1s;
		  transition-duration : 1s;
		  -webkit-transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  opacity: 1;
	  }

	/*textB ------------------------------------------------*/

	  .textB[data-scltext="textB"]>span{
		opacity: 0;
		-webkit-transform: rotateX(100deg) skew(0, 0) translate3d(1em, 1em, 0) scale(1.5, 1.5);
		transform: rotateX(100deg) skew(0,0) translate3d(1em, 1em, 0) scale(1.5, 1.5);
	  }

	  .textB[data-scltext="textB"].animated>span{
		-webkit-transition-property:all;
		transition-property:all;
		  -webkit-transition-duration : 1s;
		  -o-transition-duration : 1s;
		  transition-duration : 1s;
		  -webkit-transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  opacity: 1;
	  }

	/*textC ------------------------------------------------*/

	  .textC[data-scltext="textC"]>span{
		opacity: 0;
		-webkit-transition-property:opacity;
		transition-property:opacity;
		-webkit-transform: rotateX(0) skew(0, 0) translate3d(1em, 1em, 0) scale(2, 2);
		transform: rotateX(0) skew(0,0) translate3d(1em, 1em, 0) scale(2, 2);
	  }

	  .textC[data-scltext="textC"].animated>span{
		-webkit-transition-property:opacity ,transform;
		transition-property:opacity ,transform;
		  -webkit-transition-duration : 1s;
		  -o-transition-duration : 1s;
		  transition-duration : 1s;
		  -webkit-transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  opacity: 1;
	  }

	/*textC ------------------------------------------------*/

	  .textD[data-scltext="textD"]>span{
		opacity: 0;
		-webkit-transition-property:opacity;
		transition-property:opacity;
		-webkit-transform: rotateX(0) skew(0, 0) translate3d(1em, 0, 0) scale(0.3, 0.3);
		transform: rotateX(0) skew(0,0) translate3d(1em, 0, 0) scale(0.3, 0.3);
	  }

	  .textD[data-scltext="textD"].animated>span{
		-webkit-transition-property:opacity ,transform;
		transition-property:opacity ,transform;
		  -webkit-transition-duration : 1s;
		  -o-transition-duration : 1s;
		  transition-duration : 1s;
		  -webkit-transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  transform: rotateX(0) skew(0, 0) translate3d(0, 0, 0) scale(1, 1);
		  opacity: 1;
	  }

	/*--------------------------
	scroll event
	----------------------------*/

		/*fade ------------------------------------------------*/
		.fade{
				opacity: 0;
			  }
			  .fade.animated{
				opacity: 1;
				-webkit-transition: opacity 1.5s  cubic-bezier(0.155, 0.910, 0.695, 0.950);
				transition: opacity 1.5s  cubic-bezier(0.155, 0.910, 0.695, 0.950);
		}

		/*fadeUp ------------------------------------------------*/
		.fadeUp>div{
				opacity: 0;
				-webkit-transform: translate(0,20%);
			    transform: translate(0,20%);
			    transition-duration: 1.5s;
			    -webkit-transition-duration: 1.5s;
			    transition-property: opacity transform;
			    -webkit-transition-property: opacity transform;
			    transition-timing-function: cubic-bezier(0.155, 0.910, 0.695, 0.950);
			    -webkit-transition-timing-function: cubic-bezier(0.155, 0.910, 0.695, 0.950);
			    transition-delay: 0s;
			    -webkit-transition-delay: 0s;
			}
			.fadeUp.animated>div {
			    opacity: 1;
				-webkit-transform: translate(0,0);
			    transform: translate(0,0);
			    transition-duration: 1.5s;
			    -webkit-transition-duration: 1.5s;
			    transition-property: opacity transform;
			    -webkit-transition-property: opacity transform;
			    transition-timing-function: cubic-bezier(0.155, 0.910, 0.695, 0.950);
			    -webkit-transition-timing-function: cubic-bezier(0.155, 0.910, 0.695, 0.950);
			    transition-delay: 0s;
			    -webkit-transition-delay: 0s;
			}

		/*SlideInUp ------------------------------------------------*/
			.slideUp>div{
				opacity: 1;
				-webkit-transform: translate3d(0, 100px, 0);
				transform: translate3d(0, 100px, 0);
				-webkit-transition: all 1.2s cubic-bezier(0.155, 0.910, 0.695, 0.950);
				transition: all 1.2s  cubic-bezier(0.155, 0.910, 0.695, 0.950);
			}
				.slideUp.animated>div {
					opacity: 1;
					transform: translate3d(0, 0, 0);
					-webkit-transition: all 1.2s cubic-bezier(0.155, 0.910, 0.695, 0.950);
					transition: all 1.2s  cubic-bezier(0.155, 0.910, 0.695, 0.950);
				}


	/*背景スライド　+フェイド ------------------------------------------------*/
	/*必須
	<div data-sclrep="bgSlide">
	  <div class="f-wrap>フェイドコンテンツ</div>
	  ::before（スライドレイヤー）
	</div>
	*/
	.bgSlide{
		position: relative;
		z-index: 1;
		overflow: hidden;
	}
		/*スライドレイヤー*/
		.bgSlide::before{
			content:"";
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top:0;
			left:0;
			background: #fff;
			-webkit-transform: translate3d(-100%,0,0);
			transform: translate3d(-100%,0,0)
			-webkit-transition: all 0.6s cubic-bezier(.7,0.2,.08,1);
			transition: all 0.6s cubic-bezier(.7,0.2,.08,1);
			z-index: 2;
		}
		.bgSlide.animated::before {
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0)
			-webkit-transition: all 0.6s cubic-bezier(.7,0.2,.08,1);
			transition: all 0.6s cubic-bezier(.7,0.2,.08,1);
		}

		/*フェイドレイヤー*/
		.bgSlide>.f-wrap{
			position: relative;
			opacity: 0 ;
			z-index: 3;
			-webkit-transition: opacity 0.4s ease 0s;
			transition: opacity 0.4s ease 0s;
		}
		.bgSlide.animated>.f-wrap {
			opacity: 1;
			-webkit-transition: opacity 0.6s ease-out 0.6s;
			transition: opacity 0.6s ease-out 0.6s;
		}
/*
		[data-scla="left"]{
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		}

		.animated[data-scla="left"]{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
		transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
		}
		[data-scla="right"]{
		-webkit-transform: translate(50%, 0);
		transform: translate(50%, 0);
		}

		.animated[data-scla="right"]{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
		transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
		}

		[data-scla="mskL"]{
		opacity: 1;
		position: relative;
		overflow:hidden;
		}
		  [data-scla="mskL"]::after{
			content:"";
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top:0;
			left:0;
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
			background: #fff;
			-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
		  }
				.animated[data-scla="mskL"]::after{
					-webkit-transform: translate(-100%, 0);
					transform: translate(-100%, 0);
					  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
					transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
				}

		[data-scla="mskR"]{
			opacity: 1;
			position: relative;
			overflow:hidden;
		}
			[data-scla="mskR"]::after{
				content:"";
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				top:0;
				left:0;
				-webkit-transform: translate(0, 0);
				transform: translate(0, 0);
				background: #fff;
				-webkit-transition: all 0.4s ease;
				transition: all 0.4s ease;
			}
					.animated[data-scla="mskR"]::after{
						-webkit-transform: translate(100%, 0);
						transform: translate(100%, 0);
						  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
						transition: all 0.8s cubic-bezier(0.165, 0.840, 0.440, 1);
					}

		[data-scla="mskSkewL"]{
			opacity: 1;
			position: relative;
			overflow:hidden;
		}
			[data-scla="mskSkewL"]::after{
				content:"";
				position: absolute;
				display: block;
				width: 300%;
				height: 100%;
				top:0;
				left:0;
				background: #fff;
				-webkit-transform: skew(-45deg) scaleX(2) translate(0% , 0%);
				transform: skew(-45deg) scaleX(2) translate(0% , 0%);
				-webkit-transition: all 5s ease;
				transition: all 5s ease;
			}
				.animated[data-scla="mskSkewL"]::after{
					-webkit-transform: skew(-45deg) scaleX(2) translate(-200% , 0%);
					transform: skew(-45deg) scaleX(2) translate(-200% , 0%);
					  -webkit-transition: all 5s  ease;
					transition: all 5s  ease;
				}
	[data-scla="mskSkewR"]{
			opacity: 1;
			position: relative;
			overflow:hidden;
		}
			[data-scla="mskSkewR"]::after{
				content:"";
				position: absolute;
				display: block;
				width: 300%;
				height: 100%;
				top:0;
				left:0;
				background: #fff;
				-webkit-transform: skew(45deg) scaleX(2) translate(0% , 0%);
				transform: skew(45deg) scaleX(2) translate(0% , 0%);
				-webkit-transition: all 8s ease;
				transition: all 8s ease;
			}
				.animated[data-scla="mskSkewR"]::after{
					-webkit-transform: skew(45deg) scaleX(2) translate(200% , 0%);
					transform: skew(45deg) scaleX(2) translate(200% , 0%);
					  -webkit-transition: all 5s ease;
					transition: all 5s ease;
				}

*/