@charset "utf-8";

.bg_slide{
    position:relative;
    padding-top:0;
}
.bg_slide p{
	padding:0 20px;
    text-align:center;
}


.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    font-size:6vw;
    font-family:Impact;    
}

.fadeUp:nth-child(2) {
	animation-name:fadeUpAnime;
	animation-delay:.5s;
    animation-fill-mode:forwards;
    opacity:0;
    font-size:1vw;
    margin-top:-2%;
}
.fadeUp:nth-child(3) {
	animation-name:fadeUpAnime;
	animation-delay:1s;
    animation-fill-mode:forwards;
    opacity:0;
    font-size:1vw;
    font-family:HGS�޼��E;
    margin-top:-2%;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  	transform: translateY(50px);
  }
  to {
    opacity: 1;
  	transform: translateY(0);
  }
}
/* �X�N���[����������o������v�f�ɂ͂��߂ɓ���0���w��@*/
.text-fadeUp{
    opacity: 0;
}

/* --------------------�Y�[���A�E�g�ݒ�--------------------- */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* �X�N���[����������o������v�f�ɂ͂��߂ɓ���0���w��@*/
.text-zoomOut{opacity: 0;}



/* --------------------�t�F�[�h�A�b�v�ݒ�--------------------- */

.workUp{
	animation-name:workUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes workUpAnime{
  from {
    opacity: 0;
  	transform: translateY(50px);
  }

  to {
    opacity: 1;
  	transform: translateY(0);
  }
}


/* �X�N���[����������o������v�f�ɂ͂��߂ɓ���0���w��@*/
 
.fadeUpTrigger{
    opacity: 0;
}

.delay-time02{  
  	animation-delay: 0.2s;
}

.delay-time04{  
  	animation-delay: 0.4s;
}

.delay-time06{  
  	animation-delay: 0.6s;
}

.delay-time08{  
  	animation-delay: 0.8s;
}

.delay-time1{  
  	animation-delay: 1s;
}

.delay-time2{  
  	animation-delay: 2s;
}


/*---------------�ォ�牺------------------*/
.bgUDextend::before{
  	animation-name:bgUDextendAnime;
  	animation-duration:1s;
  	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height:100%;
    background-color: #fff;/*�L�т�w�i�F�̐ݒ�*/
	z-index:0;
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* �X�N���[����������o������v�f�ɂ͂��߂ɓ���0���w��@*/
.bgappearTrigger,
.bgUDextendTrigger{
	opacity: 0;
}


.pp{
  	margin: 20px;
  	font-size: 20px;
  	overflow: hidden;/*���E�A�j���[�V�����ʼn�ʂ���͂ݏo��ۂɏo�鉡�X�N���[���o�[���B��*/
}

/*========= �����e�L�X�g ===============*/

/*�S����*/

.slide-in {
  	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  	display: inline-block;

}

/*���E�̃A�j���[�V����*/
.leftAnime{
    opacity: 0;/*���O�ɓ���0�ɂ��ď����Ă���*/
}

.slideAnimeLeftRight {
  	animation-name:slideTextY100;
  	animation-duration:1.2s;
  	animation-fill-mode:forwards;
    overflow: hidden;
    opacity: 0;
}

@keyframes slideTextY100 {
  from {
  transform: translateY(100%); /*�v�f�����̘g�O�Ɉړ�*/
        opacity: 0;
  }

  to {
  transform: translateY(0);/*�v�f�����̈ʒu�Ɉړ�*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  	animation-name:slideTextY-100;
  	animation-duration:1.2s;
  	animation-fill-mode:forwards;
    overflow: hidden;
    opacity: 0;
}


@keyframes slideTextY-100 {
  from {
  transform: translateY(100%);/*�v�f���E�̘g�O�Ɉړ�*/
    opacity: 0;
  }

  to {
  transform: translateY(0);/*�v�f�����̈ʒu�Ɉړ�*/
    opacity: 1;
  }
}


/*========= ������E�ɗ����e�L�X�g ===============*/

/*�S����*/

.slide-in {
  	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  	display: inline-block;

}

/*���E�̃A�j���[�V����*/
.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*���E�̃A�j���[�V����*/
.leftAnime{
    opacity: 0;/*���O�ɓ���0�ɂ��ď����Ă���*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:1s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*�v�f�����̘g�O�Ɉړ�*/
        opacity: 0;
  }

  to {
  transform: translateX(10%);/*�v�f�����̈ʒu�Ɉړ�*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:1s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*�v�f���E�̘g�O�Ɉړ�*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*�v�f�����̈ʒu�Ɉړ�*/
    opacity: 1;
  }
}