@charset "UTF-8";
/*-------
アニメーションが終わるまでスクロール禁止
-------*/
body#front-page {
    overflow: hidden;
}
body#front-page.scrollable {
    overflow: auto;
}

/*=====================================
welcome-message
================================ */
#welcome-message {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =====================================
Logo Animation Styles
================================ */
.logo-path-front,
.logo-path-back {
    stroke: #231f20;
    stroke-width: 1;
    fill: #fff; /* または #000 */
    fill-opacity: 0; /* 最初は透明 */
}

.fill-fade-in-white {
    animation: fadeFillWhite 1s ease-in forwards;
}

.fill-fade-in-black {
    animation: fadeFillBlack 1s ease-in forwards;
}

@keyframes fadeFillWhite {
    to {
        fill-opacity: 1;
    }
}
@keyframes fadeFillBlack {
    to {
        fill-opacity: 1;
    }
}
/* =====================================
Logo Container Styles
================================ */
#logo-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
    width: 100%;
    height: 500px;
}
#logo-container.fade-in {
    opacity: 1;
}
#logo-container.fade-in .svg-part {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 1s ease-out, opacity 1s ease-in;
    display: block;
    width: 100%;
    height: 500px;
}
.svg-part {
    position: absolute;
    transition: all 1s ease-in-out;
    opacity: 0;
}
@media (max-width: 768px) {
   #logo-container {
    height: 300px;
   }
   #logo-container.fade-in .svg-part {
    height: 250px;
   }
}
/*--- each parts ---*/
#logo-container.fade-in .svg-part.svg-rightback {
    transform: translate(calc(-50% - 7px), calc(-50% - 27px));
    height: 360px;
}
#logo-container.fade-in .svg-part.svg-left {
    transform: translate(calc(-50% - 73px), calc(-50% + 98px));
    height: 250px;
}
#logo-container.fade-in .svg-part.svg-ball {
    transform: translate(calc(-50% + 23px), calc(-50% + 66px));
    height: 300px;
}
#logo-container.fade-in .svg-part.svg-rightfront {
    transform: translate(calc(-50% + 93px), calc(-50% + 106px));
    height: 160px;
}
.fade-in .svg-part {
    opacity: 1;
}
@media (max-width: 768px) {
    #logo-container.fade-in .svg-part.svg-rightback {
        transform: translate(calc(-50% - -7px), calc(-50% - 7px));
        height: calc(373px * 0.6);
    }
    #logo-container.fade-in .svg-part.svg-left {
        transform: translate(calc(-50% - 47px), calc(-50% + 68px));
        height: calc(250px * 0.6);
    }
    #logo-container.fade-in .svg-part.svg-ball {
        transform: translate(calc(-50% + 23px), calc(-50% + 48px));
        height: calc(300px * 0.6);
    }
    #logo-container.fade-in .svg-part.svg-rightfront {
        transform: translate(calc(-50% + 69px), calc(-50% + 73px));
        height: calc(160px * 0.6);
    }
}
/*--- scroll-message ---*/
.scroll-message {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2em;
    color: var(--def-black);
    opacity: 0.7;
    animation: blink 1.5s infinite;
}

/* =====================
* each item
*===================== */
.svg-rightback.moved {
    transform: translate(calc(-15vw - 0px), calc(-60vh + 0px)) !important;
    position: fixed !important;
}
.svg-rightfront.moved {
    transform: translate(calc(-10vw - 0px), calc(-29vh + 0px))  !important;
    position: fixed !important;
    z-index: 4 !important;
}
.svg-left.moved {
    transform: translate(calc(-53vw - 0px), calc(18vh + 0px)) !important;
    position: fixed !important;
}
.svg-ball.moved {
    transform: translate(-50%, -50%) scale(6) !important;
    fill-opacity: 1;
    opacity: 1;
    animation: ballAnimation 1s ease-in forwards;
}
@media (max-width: 768px) {
    #logo-container.fade-in .svg-part.svg-rightback.moved {
        transform: translate(calc(-15vw - 0px), calc(-60vh + 0px)) !important;
    }
    #logo-container.fade-in .svg-part.svg-left.moved {
        transform: translate(calc(-75vw - 0px), calc(34vh + 0px)) !important;
    }
    #logo-container.fade-in .svg-part.svg-ball.moved {
        transform: translate(calc(-50% + 23px), calc(-50% + 48px));
    }
    #logo-container.fade-in .svg-part.svg-rightfront.moved {
        transform: translate(calc(-10vw - 0px), calc(-40vh + 0px))  !important;
    }
}
@keyframes ballAnimation {
    to {
        fill-opacity: 0;
        opacity: 0;
        pointer-events: none;
    }
}