@charset "UTF-8";
/****************************************
contents
*****************************************/

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.8s;
  display:block;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.faderight {
    opacity : 0;
    transform : translate(50px, 0);
    transition:all 0.8s;
  display:block;
}
.faderight.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadeleft {
    opacity : 0;
    transform : translate(-50px, 0);
    transition:all 0.8s;
  display:block;
}
.fadeleft.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadein2 {
    opacity : 0;
    transform : translate(0, -50px);
    transition:all 0.8s;
  display:block;
}
.fadein2.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}




/****************************************
chapter01
*****************************************/
.animation-box:nth-child(odd){
	background: #eee;
}

.animation-box{
	padding: 120px;
	transition:.5s;
}

.animation-box.active{
	background: #666;
	color: #fff;
}

/****************************************
chapter02
*****************************************/
.img-container{
	overflow: hidden;
	position: relative;
}

.img-container__img{
	display: block;
	opacity: 0;
	position: relative;
	transition:all .5s .3s ease; 
	z-index: 0;
}

.img-container:before{
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition:all .8s 0s ease; 
	width: 100%;
	z-index: 1;		
}

.text-container{
	padding:0 60px;
}

.text-container__title{
	display: inline-block;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.text-container__title:before{
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition:all .8s .3s ease; 
	width: 100%;
	z-index: 1;		
}

.text-container__title__inner{
	display: inline-block;
	opacity: 0;
	transition: all .8s .5s ease;
}

.text-container__text{
	left: -50px;
	opacity: 0;
	position: relative;
	transition: all .5s .5s ease;
}

/*アニメーションするプロパティを設定します*/
.img-container.active img{
	opacity: 1;
}

.img-container.active:before{
	transform: translateX(100%);	
}

.text-container.active .text-container__title:before{
	transform: translateX(100%);
}

.text-container.active .text-container__title__inner{
	opacity: 1;
}

.text-container.active .text-container__text{
	left: 0;
	opacity: 1;
}


@media screen and (max-width: 481px) {


.faderight {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.8s;
  display:block;
}


.fadeleft {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.8s;
  display:block;
}
	
}