.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .scroll_up2 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up2.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .scroll_up3 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up3.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .scroll_up4 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up4.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .scroll_up5 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up5.on {
    transform: translateY(0);
    opacity: 1.0;
  }
  .scroll_up6 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up6.on {
    transform: translateY(0);
    opacity: 1.0;
  }

  /*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}



/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#eee;
	text-align:center;
	color:#fff;
  top: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:600px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #b30040;/*線の色*/
	}

  /* マウスストーカー */
  #mouse-stalker {
    pointer-events: none;
    position: fixed;
    top: -10px; 
    left: -10px; 
    width: 20px; 
    height: 20px;
    background: transparent;
    border-radius: 50%;
    transform: translate(0, 0);
    transition: transform 0.2s; 
    transition-timing-function: ease-out;
    z-index: 999;
    mix-blend-mode: difference;
  }
/*   
  #mouse-stalker.is_active {
      top: -40px; 
      left: -40px;
      width: 40px;
      height: 40px;
      opacity: 0.5;
      transition: 0.2s;
      
    }
   */