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

/*WIM*/
.wim {  position: relative;display:inline-block;width:100%;/* height:670px;*/}
/* span要素 最初は非表示 */
.wim span {  transition: all 1s 1.5s ease;  opacity: 0;  padding: 0;  	}
/*.wimに.activeがついたらspanを表示（1s後に0sかけて透明度を0→1に） */
.wim.active span {  opacity: 1; }
/* .wimに擬似要素(カーテン部分)を追加して、transformで横幅を0にしておく scaleX(0) */
.wim:after {  display: inline;  content: '';  position: absolute;  left: 0;  top:0px;  width: 100%;  height:100%;  transform: scaleX(0);  background: white;}
/* .wimに.activeがついたら擬似要素のアニメーションを開始させる */
/* アニメーション名,アニメーション完了までの所要時間,変化の度合い,遅延時間,回数,再生方向,アニメーション前後のスタイル,アニメーションの再生・停止 */
.wim.active:after {  animation: wimEffect 1s ease-in-out 1.0s 1 normal both running;}
@keyframes wimEffect {
	0% {    transform-origin: left center;    transform: scaleX(0);  }
	49.999% {    transform-origin: left center;    transform: scaleX(1);  }
	50% {    transform-origin: right center;    transform: scaleX(1);  }
	100% {    transform-origin: right center;    transform: scaleX(0);  }
}

/*キャッチコピー*/
.catch {  position: relative;display:inline-block;/* width:950px;height: 100px;*/}
.catch span {  transition: all 1s 2.5s ease;  opacity: 0;  padding: 0;	}
.catch.active span {  opacity: 1; }
.catch:after {  display: inline;  content: '';  position: absolute;  left: 0%;  top: 0;  width:100%;  height: 100%;  transform: scaleX(0);  background:white;}
.catch.active:after {  animation: catchEffect 1s ease-in-out 2.0s 1 normal both running;}
@keyframes catchEffect {
	0% {    transform-origin: left center;    transform: scaleX(0);  }
	49.999% {    transform-origin: left center;    transform: scaleX(1);  }
	50% {    transform-origin: right center;    transform: scaleX(1);  }
	100% {    transform-origin: right center;    transform: scaleX(0);  }
}

/*キャッチコピー02*/
.catch02 {  position: relative;display:inline-block;/*width:1000px;height: 100px;*/ }
.catch02 span {  transition: all 1s 2.7s ease;  opacity: 0;  padding: 0;	}
.catch02.active span {  opacity: 1; }
.catch02:after {  display: inline;  content: '';  position: absolute;  left:0%;  top: 0;  width:100%;  height: 100%;  transform: scaleX(0);  background:white;}
.catch02.active:after {  animation: catch02Effect 1s ease-in-out 2.2s 1 normal both running;}
@keyframes catch02Effect {
	0% {    transform-origin: left center;    transform: scaleX(0);  }
	49.999% {    transform-origin: left center;    transform: scaleX(1);  }
	50% {    transform-origin: right center;    transform: scaleX(1);  }
	100% {    transform-origin: right center;    transform: scaleX(0);  }
}

/*背景動画*/
.movie_background {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:4.2s; 
    -ms-animation-duration:4.2s; 
    animation-duration:4.2s; 
    -webkit-animation-name:slide_image; 
    animation-name:slide_image; 
    visibility: visible !important;
}
@-webkit-keyframes slide_image{
    0% {opacity: 0;-webkit-transform: translateY(0px); }
    90% { opacity: 0.5; -webkit-transform: translateY(0px); } 
	100% { opacity: 0.5; -webkit-transform: translateY(0); }
}
@keyframes slide_image {
    0% { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 
    90% { opacity: 0.5;  -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 
	100% { opacity: 0.5; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*ロゴ nav*/
.logo {
    -webkit-animation-fill-mode:both; 
    -ms-animation-fill-mode:both; 
    animation-fill-mode:both; 
    -webkit-animation-duration:4.5s; 
    -ms-animation-duration:4.5s; 
    animation-duration:4.5s; 
    -webkit-animation-name:logo; 
    animation-name:logo; 
    visibility: visible !important;
}
@-webkit-keyframes logo{
    0% { opacity: 0; -webkit-transform: translateY(-80px); }    
	90% { opacity: 0; -webkit-transform: translateY(-80px); }    	
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes logo{ 
    0% { opacity: 0; -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); }
	90% { opacity: 0; -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



/*コンセプト以下共通*/
/*横スライドインを動作するclass*/
.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;  top: 0; right: 0%;  z-index: 1;  width:100%;  height: 100%;  background:#c6cadd;
}
@keyframes play {
  from {    transform: translateX(-100%);  }  
  to {    transform: translateX(0);  }
}
/*マスク要素をスライドアウトする*/
@keyframes maskOut {
  from {    transform: translateX(0);  }  
  to {    transform: translateX(100%);  }
}

/*スクロール時のアニメーション*/
.concept_text{    
    -webkit-transition: all .2s linear .2s;
    -o-transition: all .2s linear .2s;
    transition: all .2s linear .2s;
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);	
	transition-delay:1.2s;
	opacity: 0;
}
.concept_text.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}

.concept_button{    
    -webkit-transition: all .2s linear .2s;
    -o-transition: all .2s linear .2s;
    transition: all .2s linear .2s;
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);	
	transition-delay:1.4s;
	opacity: 0;
}
.concept_button.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}
/*
.service_list{    
    -webkit-transition: all .1s linear .2s;
    -o-transition: all .1s linear .2s;
    transition: all .1s linear .2s;
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);	
	transition-delay:1.4s;
	opacity: 0;
}
.service_list.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}
*/
.service_text{    
    -webkit-transition: all .2s linear .2s;
    -o-transition: all .2s linear .2s;
    transition: all .2s linear .2s;
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);	
	transition-delay:1.2s;
	opacity: 0;
}
.service_text.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}

.service_button{    
    -webkit-transition: all .2s linear .2s;
    -o-transition: all .2s linear .2s;
    transition: all .2s linear .2s;
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);	
	transition-delay:1.4s;
	opacity: 0;
}
.service_button.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}
/*
.port_folio_list{    
    -webkit-transition: all .1s linear .2s;
    -o-transition: all .1s linear .2s;
    transition: all .1s linear .2s;
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	transform: translateY(-20px);	
	transition-delay:1.4s;
	opacity: 0;
}

.port_folio_list.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}
*/
.recruit_button{    
    -webkit-transition: all .2s linear .2s;
    -o-transition: all .2s linear .2s;
    transition: all .2s linear .2s;
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);	
	transition-delay:1.4s;
	opacity: 0;
}
.recruit_button.active{  -webkit-transform: translateY(0);  -moz-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);     opacity: 1;}