/*========= ローディング画面のためのCSS ===============*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--main-bg);
    z-index: 9999999;
    text-align:center;
    color:#333;
  }
  
  #splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  
  /*========= 画面遷移のためのCSS ===============*/
  
  /*画面遷移アニメーション*/
  
  body{
      background:var(--main-bg);/*遷移アニメーションと同じ色を指定*/
  }
  
  body.appear{
      background:var(--main-bg);/*画面を開いた後の背景色を指定*/
  }
  
  .splashbg{
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    border-width: 0px;/*開始はボーダーの太さは0*/
    border-style:solid;
      border-color: #666;/*拡大する四角の色*/
    animation-duration:.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes backBoxAnime{
    99.9% {/*アニメーション終了ぎりぎりまで*/
          z-index: 2;/*最前面に*/
      border-width: 0px;/*開始はボーダーの太さは0*/
    }
      100%{
         z-index: -1; /*最背面に*/
          border-width: 0px;/*終了はボーダーの太さは0*/
      }
  }
  
  /*画面遷移の後現れるコンテンツ設定*/
  #container{
      position: relative;
    opacity: 0;/*はじめは透過0に*/
  }
  
  /*bodyにappearクラスがついたら出現*/
  body.appear #container{
    animation-name:PageAnimeAppear;
    animation-duration:1s;
    animation-delay:0.2s;
    animation-fill-mode:forwards;
    opacity: 0;
  }
  
  @keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }
/* 

  $(window).on('load',function(){
    $("#splash").delay(1500).fadeOut('slow',function(){//ローディングエリア（splashエリア）を1.5秒でフェードアウトする記述
      $('body').addClass('appear');//フェードアウト後bodyにappearクラス付与
      var h = $(window).height();//ブラウザの高さを取得
      $(".splashbg").css({
        "border-width":h,//ボーダーの太さにブラウザの高さを代入
        "animation-name":"backBoxAnime"//animation-nameを定義
      }); 
    });
    $("#splash-logo").delay(1200).fadeOut('slow');//ロゴを1.2秒でフェードアウトする記述
  }); 
  
  */