body.appear{
    background:#fff;
}

#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../images/bg.webp)no-repeat;
    background-size: cover;
    z-index: 9999999;
    text-align:center;
    color:#111;
  }
  
  #splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: clamp(200px,30vw,600px);
    animation-delay:.35s;
  }
  .splashbg{
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    border-width: 0px;
    border-style:solid;
      border-color: #fff;
    animation-duration:.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes backBoxAnime{
    99.9% {
          z-index: 5;
      border-width: 0px;
    }
      100%{
         z-index: 4;
          border-width: 0px;
      }
  }
  
  #container{
      position: relative;
    opacity: 0;
  }
  
  body.appear #container{
    animation-name:PageAnimeAppear;
    animation-duration:1s;
    animation-delay:0.2s;
    animation-fill-mode:forwards;
    opacity: 0;
    z-index: 5;
  }
  body.appear #container::before{
    content: '';
    position: fixed;
    left:0;
    width: 50vw;
    background: #ebeae1;
    height: 100vh;
    top:0;
    animation-name:PageAnimeAppear02;
    animation-duration:.5s;
    animation-delay:.75s;
    animation-fill-mode: forwards;
    z-index: 10;
    opacity: 1;
  }
  body.appear #container::after{
    content: '';
    position: fixed;
    right:0;
    bottom:0;
    width: 50vw;
    background: #ffffff;
    height: 100vh;
    animation-name:PageAnimeAppear03;
    animation-duration:.5s;
    animation-delay:.75s;
    animation-fill-mode: forwards;
    z-index: 10;
    opacity: 1;
  }
  @keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }  

  @keyframes PageAnimeAppear02{
    0% {
        top:0;
    opacity: 1;
    }
    100% {
        top:-100vh;
    opacity: 0;
    height: 0;
  }
  } 
  @keyframes PageAnimeAppear03{
    0% {
        bottom:0;
    opacity: 1;
    }
    100% {
        bottom:-100vh;
    opacity: 0;
    height: 0;
  }
  }  

  .sitemain__name.flipDownTrigger.flipDown{
    animation-delay:3.5s;
  }

  .sitename__wrap.fadeRightTrigger{
    animation-delay:3s;
  }

  .top_slide_main .thumbnail.fadeLeftTrigger{
    animation-delay:3.5s;
  }