@charset "UTF-8";

.common_loading .loading_logo {
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInScale 0.8s ease forwards;
    animation-delay: 0.2s;
    /* 少し遅らせたい場合 */
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.common_loading .loading_logo svg .svg-elem-1 {
    stroke-dashoffset: 74.16053009033203px;
    stroke-dasharray: 74.16053009033203px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

.common_loading .loading_logo svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading .loading_logo svg .svg-elem-2 {
    stroke-dashoffset: 74.16097259521484px;
    stroke-dasharray: 74.16097259521484px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

.common_loading .loading_logo svg.active .svg-elem-2 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading .loading_logo svg .svg-elem-3 {
    stroke-dashoffset: 74.16093444824219px;
    stroke-dasharray: 74.16093444824219px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

.common_loading .loading_logo svg.active .svg-elem-3 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading .loading_logo svg .svg-elem-4 {
    stroke-dashoffset: 74.15692901611328px;
    stroke-dasharray: 74.15692901611328px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

.common_loading .loading_logo svg.active .svg-elem-4 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading .loading_logo svg .svg-elem-5 {
    stroke-dashoffset: 356.2738952636719px;
    stroke-dasharray: 356.2738952636719px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

.common_loading .loading_logo svg.active .svg-elem-5 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading .loading_logo svg .svg-elem-6 {
    stroke-dashoffset: 343.74261474609375px;
    stroke-dasharray: 343.74261474609375px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

.common_loading .loading_logo svg.active .svg-elem-6 {
    stroke-dashoffset: 0;
    fill: rgb(153, 153, 153);
}

.common_loading .loading_logo svg .svg-elem-7 {
    stroke-dashoffset: 1314.9908447265625px;
    stroke-dasharray: 1314.9908447265625px;
    fill: transparent;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

.common_loading .loading_logo svg.active .svg-elem-7 {
    stroke-dashoffset: 0;
    fill: rgb(128, 26, 31);
}

.common_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background-color: #F6F6F6;
    z-index: 1000000;
    height: 100svh;
    width: 100vw;
}

.common_loading.disactive {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s;
}

.common_loading .loading_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
}

@media (min-width: 750px) {
    .common_loading .loading_logo {
        width: 70vw;
    }
}