@charset "UTF-8";

/* ローディング画面 */
/*
Copyright (c) 2023 Asteroid - https://asteroid19.netlify.app/
Released under the MIT license
https://opensource.org/license/mit/

Copyright (c) 2023 by Lubna (https://codepen.io/Lubna/pen/VwLrRxz)
Released under the MIT license
https://opensource.org/license/mit/
*/

/* ローディング用の要素 */

/* ローディング用の要素の全てに、box-sizing: border-box;を指定。リセットCSSにて全ての要素にbox-sizing: border-box;を指定している場合は書いても書かなくてもOK */
#loading__parent, #loading__parent::before, #loading__parent::after,
#loading__parent *, #loading__parent *::before, #loading__parent *::after {
    box-sizing: border-box;
}

/* 全画面に表示する */
#loading__parent {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loading__child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ローディングが終わったら隠す */
.loading__finished {
    opacity: 0;
    visibility: hidden;
}

.loading__container {
    background-color: #222;
}

.loading__circle {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 15px solid rgb(255 255 255 / 0.2);
    border-top-color: #fff;
    animation: loading__spin 1.5s infinite linear;
}

@keyframes loading__spin {
    100% {
        transform: rotate(360deg);
    }
}