@charset "utf-8";

/* +++++++++++++++++++++++++　基本アニメーション */

.effect-bottom{
	position:relative;
	opacity:0;
	
}
.effect-bottom.active{
	animation-name:effect_b;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}
@keyframes effect_b{
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
  }

.effect-delay1 {animation-delay: 0.3s;}
.effect-delay2 {animation-delay: 0.6s;}
.effect-delay3 {animation-delay: 0.9s;}
.effect-delay4 {animation-delay: 1.2s;}
.effect-delay5 {animation-delay: 1.5s;}
.effect-delay6 {animation-delay: 1.8s;}
.effect-delay7 {animation-delay: 2.1s;}

/* +++++++++++++++++++++++++ */

#mv .copy{
}
#mv .copy .bar {
	position:relative;
	display:inline-block;
}
#mv .copy .bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	background:#fff;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
#mv .copy .copy01 .bar:before{
	animation: mv_copy_passing_bar 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
#mv .copy .copy02 .bar:before{
	animation: mv_copy_passing_bar 2s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
}
#mv .copy .bar .inner {
	opacity:0;
    animation: mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}


@keyframes mv_copy_passing_bar{
	0%{left:0;width:0}
	30%{left:0;width:100%;}
	51%{left:0;width:100%;}
	100%{left:100%;width:0;opacity: 1;}
}
@keyframes mv_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}

/* +++++++++++++++++++++++++ */

#mv .mikiya.ori-anime{
	position:relative;
	opacity:0;
}
#mv .mikiya.ori-anime.active{
	animation: mikiya_effect 0.8s ease 2.8s normal forwards;
}
@keyframes mikiya_effect{
  from {
    opacity: 0;
    transform: translateY(2%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
  }


/* +++++++++++++++++++++++++ */

#aggregation .copy.ori-anime{
}
#aggregation .copy .bar:before{
	opacity:0;
}
#aggregation .copy.ori-anime.active .bar:before{
	animation: aggregation_copy_passing_bar 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
@keyframes aggregation_copy_passing_bar{
	0%{left:0;width:0;opacity:1;}
	100%{left:0;width:100%;opacity:1;}
}
#aggregation .copy.ori-anime .inner {
	opacity:0;
    animation: aggregation_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}
@keyframes aggregation_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}

#aggregation .character-set.ori-anime{
	opacity:0;
}
#aggregation .character-set.ori-anime.active{
    animation: aggregation_character_set .4s ease .8s 1 normal forwards;
}
@keyframes aggregation_character_set{
	0%{opacity:0}
	100%{opacity:1}
}


/* +++++++++++++++++++++++++ */

#mind .mind-box .img.ori-anime{
	position:relative;
	opacity:0;
}
#mind .mind-box .img.ori-anime.active{
	animation: mind_img_ani 0.4s ease 0.3s normal forwards;
}
@keyframes mind_img_ani{
	0%{right:-5vw; opacity:0;}
	100%{right:0; opacity:1;}
}


/* +++++++++++++++++++++++++　チャットリスト */

.chat-list li{
	position:relative;
	opacity:0;
	
}
.chat-list li.active{
	animation-name:chat_effect_b;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}
@keyframes chat_effect_b{
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
  }

/* リクルートメイン+++++++++++++++++++++++++ */

#recruit-mv .mv-copy{
}
#recruit-mv .mv-copy .bar {
	position:relative;
	display:inline-block;
}
#recruit-mv .mv-copy .bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	background:#fff;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
#recruit-mv .mv-copy .copy01 .bar:before{
	animation: recruit_mv_copy_passing_bar 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
#recruit-mv .mv-copy .copy02 .bar:before{
	animation: recruit_mv_copy_passing_bar 2s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
}
#recruit-mv .mv-copy .bar .inner {
	opacity:0;
    animation: recruit_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}
@keyframes recruit_mv_copy_passing_bar{
	0%{left:0;width:0}
	30%{left:0;width:100%;}
	51%{left:0;width:100%;}
	100%{left:100%;width:0;opacity: 1;}
}
@keyframes recruit_mv_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}


/* リクルートオフィス+++++++++++++++++++++++++ */

#office .office-mv .copy .bar {
	color:#003180;
}
#office .office-mv .copy .bar:before {
	background:#87DD00;
	left: 0;
}
#office .office-mv .copy.ori-anime.active .copy01 .bar:before{
	animation: office_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
#office .office-mv .copy.ori-anime.active .copy02 .bar:before{
	animation:office_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
}
#office .office-mv .copy .bar .inner {
	opacity:0;
}
#office .office-mv .copy.ori-anime.active .bar .inner {
    animation:office_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}
@keyframes office_mv_copy_passing_bar{
	0%{left:0;width:0}
	100%{left:0;width:100%;opacity: 1;}
}
@keyframes office_mv_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}