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

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

/* Loading画像中央配置　*/
#splash_logo {
    width: 100%;
    position: absolute;
    top: 25%;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
    width: 400px;
    /* width: 90%; */
    height: 300px;

    g {
        width: 100%;
    }
}


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

/*アニメーション前の指定*/
#mask path {
    fill-opacity: 0;
    /*最初は透過0で見えない状態*/
    transition: fill-opacity 2s;
    /*カラーがつく際のアニメーション0.5秒で変化*/
    fill: none;
    /*塗りがない状態*/
    stroke: #fc9219;
    /*線の色*/
}

#mask path.cls-6 {
    fill: #fc9219;
}

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

#mask.done path.cls-7 {
    fill: #fbe9dd;
}