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

/* Loading背景画面設定　*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* フェードアウト用 */
#splash.fadeout {
    opacity: 0;
    pointer-events: none;
}

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

/* カラーロゴ画像 */
#splash_logo_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* アスペクト比を維持してSVGと完全に重ねる */
    opacity: 0;
    transition: opacity 1s ease;
}

/* カラーロゴ画像を表示 */
#splash_logo_image.show {
    opacity: 1;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
    display: block;
    width: 100%;
    height: auto;
}

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

/* SVGのフェード用 */
#mask {
    opacity: 0; /* 初期状態で非表示（JavaScriptで制御） */
    transition: opacity 0.5s ease;
}

/* 全てのpathに対する基本設定 */
#mask path {
    fill: none !important;
    fill-opacity: 0 !important;
    stroke: #1a1a1a !important;
    stroke-width: 1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* アニメーション後に.doneというクラス名が付与された時の指定 */
#mask.done path {
    fill: #1a1a1a !important;
    fill-opacity: 1 !important;
    stroke: none !important;
    transition: fill-opacity 1s ease;
}