@charset "UTF-8";
/* =========================================================
o-animate -  style
============================================================*/

.o-animate {
	&.__fadeinTop {
		opacity : 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinTop;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
			
		}
	}
	&.__fadeinLeft {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinLeft;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__fadeinRight {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinRight;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__fadeinBottom {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinBottom;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__maskBg01 {
		position: relative;
		opacity: 0;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0.875rem;
			height: 100%;
			background: var(--base-color01);
		}
		&.is-active {
			opacity: 0;
			animation-delay: 1.3s;
			animation: opacity var(--duration02) var(--timing01);
			animation-fill-mode:forwards;
			&::after {
				animation: maskBg .75s var(--timing01);
				animation-fill-mode:forwards;
			}
		}
	}
	&.__scaleRotate01 {
		opacity: 01;
		&.is-active {
			animation-duration: var(--duration02);
			animation-name: scaleRotate;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	/*既に画面内に入っている場合*/
		&.is-inFv__fadeinTop {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinTop;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
		}
		&.is-inFv__fadeinLeft {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinLeft;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}
		&.is-inFv__fadeinRight {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinRight;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}
		&.is-inFv__fadeinBottom {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinBottom;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}

		&.is-inFv__scaleRotate {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: scaleRotate;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
			@include mq-md {
				animation-name: fadeinTop;
			}
		}

		&.is-inFv__rotateScale {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: rotateScale;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
		}


		&.is-inFv__maskBg01 {
			width: fit-content;
			position: relative;
			opacity: 0;
			animation: opacity var(--duration02) var(--timing01);
			animation-delay: 1s;
			animation-fill-mode:forwards;
			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 0.875rem;
				height: 100%;
				background: var(--base-color01);
				animation: maskBg 1s var(--timing01);
				animation-delay: .8s;
				animation-fill-mode:forwards;
			}
	}
}

/* =========================================================
o-animate -  var
============================================================*/
.o-animate {
	&.__delay01 {
		&,&::after {
			transition-delay: .4s;
			animation-delay: .4s; 
		}
	}
	&.__delay02 {
		&,&::after {
		transition-delay: .8s;
		animation-delay: .8s;
	}
	}
	&.__delay03 {
		&,&::after {
		transition-delay: 1.2s;
		animation-delay: 1.2s;
	}
	}
	&.__delay04 {
		&,&::after {
		transition-delay: 1.6s;
		animation-delay: 1.6s;
	}
	}
	&.__delay05 {
		&,&::after {
		transition-delay: 2s;
		animation-delay: 2s;
	}
	}
	&.__delay06 {
		&,&::after {
		transition-delay: 2.4s;
		animation-delay: 2.4s;
	}
	}
	&.__delay07 {
		&,&::after {
		transition-delay: 2.8s;
		animation-delay: 2.8s;
	}
	}
	&.__delay08 {
		&,&::after {
		transition-delay: 3.2s;
		animation-delay: 3.2s;
	}
	}
}

/* =========================================================
Keyframes
============================================================*/

@keyframes pulse-blue {
	0% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0);
	}
	30% {
		transform: scale(0.98);
        border: 1px solid rgba(var(--accent-color01), 1);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0.5);
	}

	70% {
		transform: scale(1.04);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 10px rgba(var(--accent-color01), 0);
	}

	100% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0);
	}
}
@keyframes pulse-red {
	0% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0);
	}
	3% {
		transform: scale(0.98);
        border: 1px solid rgba(var(--accent-color03), .5);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0.3);
	}

	70% {
		transform: scale(1.02);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 10px rgba(var(--accent-color03), 0);
	}

	100% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0);
	}
}

@keyframes pathmove{
	0%{
	  height:0;
	  top:-120px;
	  opacity: 0;
	}
	20%{
	  height:64px;
	  opacity: 1;
	}
	100%{
	  height:0;
	  top: -20px;
	  opacity: 0;
	}
}

@keyframes bgimgMove{
	0%{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	25%{
		top: -200px;
		left: 200px;
	}
	75% {
		bottom: 100px;
		right: 100px;

	}
	100%{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

@keyframes appear {
    to {
		bottom: 12px;
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes gradientDots {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 200% 100%;
	}
	100% {
	  background-position: 0% 50%;
	}
  }

  @keyframes rotate{
	from {
		transform: rotate(0deg) scale(1.2);
	}
	to {
		transform: rotate(360deg) scale(1.2);
	}
  }


  @keyframes js-upAnime{
	from {
	  opacity: 1;
	transform: translateY(0);
	}
	to {
	transform: translateY(-190px);
	}
  }

  @keyframes js-downAnime{
	from {
	transform: translateY(-190px);
	}
	to {
	  opacity: 1;
	transform: translateY(0);
	}
  }

  @keyframes slideAnime {
	0% {
	  opacity: 0;
	}
  
	16% {
	  opacity: 1;
	}
  
	33% {
	  opacity: 1;
	}
  
	49% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 0;
	  transform: scale(1);
	}
  }

  @keyframes fadeinLeft{
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
  }
  @keyframes fadeinRight{
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
  }
  @keyframes fadeinTop{
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
  }
  @keyframes fadeinBottom{
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
  }

  @keyframes scaleRotate{
	0% {
		opacity: 0;
		transform: rotateY(0deg) scale(0) translateY(-10px);
	}
	70% {
		opacity: 1;
		transform: rotateY(780deg);
	}
	100% {
		opacity: 1;
		transform: rotateY(720deg) scale(1) translateY(0px);
	}
  }


  @keyframes scaleUp{
	0% {
		opacity: 0;
		transform: scale(0);
	}
	70% {
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
  }

  @keyframes bgScaleUp{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
  }

  @keyframes rotateScale {
	0% {
		opacity: 0;
		transform: rotate(-45deg);
	}
	75% {
		opacity: 1;
		transform: rotate(10deg);
	}
	95% {
		transform: rotate(-2deg);
	}
	100% {
		opacity: 1;
		transform: rotate(0deg);
	}
  }

  @keyframes notificationShowHide01 {
	0% {
		z-index: 10;
		opacity: 0;
		transform: translateY(-15px);
	}

	5% {
		z-index: 10;
		opacity: 1;
		transform: translateY(0px);
	}

	95% {
		z-index: 10;
		opacity: 1;
		transform: translateY(0px);
	}


	100% {
		opacity: 0;
		transform: translateY(-15px);
		z-index: -1;
	}
  }

  @keyframes notificationBar01 {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
  }

  @-webkit-keyframes maskBg {
	0% {
	  left: 0;
	  width: 0.875rem;
	}
	50% {
	  left: 0;
	  width: 100%;
	}
	100% {
	  left: 100%;
	  width: 0;
	}
  }
  
  @keyframes maskBg {
	0% {
	  left: 0;
	  width: 0.875rem;
	}
	50% {
	  left: 0;
	  width: 100%;
	}
	100% {
	  left: 100%;
	  width: 0;
	}
  }