@charset "utf-8";

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

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

/* Loading画像中央配置　*/
#splash_logo {
  width: 100%;
  max-width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.splash_sp_logo {
  max-width: 260px !important;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:100%;
}


/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
  /*========= SVG操作手書き風にするためのCSS ===============*/
  
  #mask .st0{
      fill:none;
      stroke:#fff;
      stroke-width:12;/*線の太さを指定する*/
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-miterlimit:10;
      stroke-dasharray: 2200 ; /* 線の間隔を指定する */
      stroke-dashoffset:1500; /* 線の位置を指定する */
  }
  /*========= レイアウトのためのCSS ===============*/
  
  

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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