@charset "utf-8";

#loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  color: #fff;
}

#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading_logo svg{
  width: 264px;
}

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

#mask path {
    fill-opacity: 0;
    transition: fill-opacity .5s;
    fill: none;
    stroke: #333;
  }

#mask.done path{
    fill: #333;
    fill-opacity: 1;
    stroke: none;
  }

/*========= 画面遷移のためのCSS =========*/

.switching{
  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: 2;
    border-width: 0px;
  }
  100%{
    z-index: -1;
    border-width: 0px;
  }
}

#container{
  position: relative;
  opacity: 0;
	overflow: hidden;
}

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;
}
}