@charset "utf-8";
/*========= LoadingのためのCSS ===============*/

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

/* 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 0.5s;/*カラーがつく際のアニメーション0.5秒で変化*/
    fill: none;/*塗りがない状態*/
    stroke-width: 1.5;
    stroke: #a67c52;/*線の色*/
  }

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
    fill: #a67c52;/*塗りの色*/
    fill-opacity: 1;/*透過1で見える状態*/
    stroke: none;/*線の色なし*/
  }

/*========= レイアウトのためのCSS ===============*/

#contentbody{
    position: relative;
    width:100%;
    height: 100vh;
    opacity: 0;
    animation: contentbodyvisible 4s ease-in-out .2s 1 normal forwards;
}
@keyframes contentbodyvisible {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}