.loading-display-back {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100svh;
    background-color: white;
    animation: loading-back 5s ease 1 forwards;
}
@keyframes loading-back {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

.loading-display-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    width: 100%;
    height: 100svh;
    background-image: url(../images/product-04.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 57% 50%;
    overflow: hidden;
    animation: loading 5s ease 1 forwards;
}
@media screen and (min-width: 960px) {
    .loading-display-container {
        background-position: center;
    }
}
@keyframes loading {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

.loading-logo {
    z-index: 9999;
    transform: translate(-5vw, 8vw) scale(0.9);
    animation: loading-logo 5s ease-in-out 1 forwards;
}
@media screen and (min-width: 960px) {
    .loading-logo {
        transform: translate(0, 0) scale(0.9);
        animation: loading-logo-pc 5s ease-in-out 1 forwards;
    }
}
@keyframes loading-logo {
    0% {
        opacity: 1;
    }
    60% {
        opacity: 1;
        transform: translate(-5vw, 8vw) scale(0.9);
    }
    70% {
        opacity: 0;
        transform: translate(-5vw, 8vw) scale(0.95);
    }
    100% {
        opacity: 0;
    }
}
@keyframes loading-logo-pc {
    0% {
        opacity: 1;
    }
    60% {
        opacity: 1;
        transform: translate(0, 0) scale(0.9);
    }
    70% {
        opacity: 0;
        transform: translate(0, 0) scale(0.95);
    }
    100% {
        opacity: 0;
    }
}

.loading-logo-test {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50vw;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}
.loading-logo-test img {
    width: 100%;
}

.svg-m1 {
    transform:
        translate(-15vw, 2vw)
        scale(6.7)
    ;
}
.svg-m2 {
    transform:
        translate(-8.6vw, -3.8vw)
        scale(4.6)
    ;
}
.svg-m3 {
    transform:
        translate(-3.1vw, -12.3vw)
        scale(5.6)
    ;
}
.svg-c {
    transform:
        translate(12.3vw, -19.9vw)
        scale(12)
    ;
}
@media screen and (min-width: 960px) {
    .svg-m1 {
        transform:
            translate(-216px, 62px)
            scale(13.7)
        ;
    }
    .svg-m2 {
        transform:
            translate(-152px, 35px)
            scale(9.4)
        ;
    }
    .svg-m3 {
        transform:
            translate(-97px, -15px)
            scale(11.4)
        ;
    }
    .svg-c {
        transform:
            translate(70px, -61px)
            scale(24.5)
        ;
    }
}
#mask-path-m1 {
    fill: none; /* 塗りの色 */
    stroke: #fff; /* 線の色 */
    stroke-width: 60; /* 線幅 */
    stroke-linecap: round; /* 線端の形状 */
    stroke-linejoin: round; /* 角の形状 */
    stroke-dasharray: 3000; /* 線の間隔を指定する */
    stroke-dashoffset: 3000; /* 線の位置を指定する */
    animation: draw 2s ease forwards 0.2s; /* アニメーション設定 5秒間で線が描かれる*/
}
#mask-path-m2 {
    fill: none; /* 塗りの色 */
    stroke: #fff; /* 線の色 */
    stroke-width: 125; /* 線幅 */
    stroke-linecap: round; /* 線端の形状 */
    stroke-linejoin: round; /* 角の形状 */
    stroke-dasharray: 2000; /* 線の間隔を指定する */
    stroke-dashoffset: 2000; /* 線の位置を指定する */
    animation: draw 1.5s linear forwards 0.5s; /* アニメーション設定 5秒間で線が描かれる*/
}
#mask-path-m3 {
    fill: none; /* 塗りの色 */
    stroke: #fff; /* 線の色 */
    stroke-width: 100; /* 線幅 */
    stroke-linecap: round; /* 線端の形状 */
    stroke-linejoin: round; /* 角の形状 */
    stroke-dasharray: 2000; /* 線の間隔を指定する */
    stroke-dashoffset: 2000; /* 線の位置を指定する */
    animation: draw 1.2s linear forwards 0.7s; /* アニメーション設定 5秒間で線が描かれる*/
}
#mask-path-c {
    fill: none; /* 塗りの色 */
    stroke: #fff; /* 線の色 */
    stroke-width: 40; /* 線幅 */
    stroke-linecap: round; /* 線端の形状 */
    stroke-linejoin: round; /* 角の形状 */
    stroke-dasharray: 2000; /* 線の間隔を指定する */
    stroke-dashoffset: 2000; /* 線の位置を指定する */
    animation: draw 0.5s ease-in forwards 1s; /* アニメーション設定 5秒間で線が描かれる*/
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.loading-logo-polishing {
    position: absolute;
    top: 0;
    left: 0;
    width: 25.6vw;
    transform: translate(8.4vw, 8.4vw);
    opacity: 0;
    animation: loading-logo-polishing 3s ease forwards 1.6s;
}
.loading-logo-polishing img {
    width: 100%;
}
@media screen and (min-width: 960px) {
    .loading-logo-polishing {
        width: 282px;
        transform: translate(23px, 117px);
    }
}
@keyframes loading-logo-polishing {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}