/* スプラッシュスクリーン全体 */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    pointer-events: all;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

/* 背景画像 */
.splash-screen__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
    .splash-screen__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* スプラッシュスクリーン内のコンテンツを囲むコンテナ */
.splash-screen__content {
    position: relative; /* 子要素の絶対配置の基準にする */
    width: 100%; /* 小さな画面でもレスポンシブに対応 */
    height: 100%; /* 親要素に高さを合わせる */
    display: flex; /* ロゴを配置するため */
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:768px) {
    .splash-screen__content {
        max-width: 1100px;
        min-height: 680px;
    }
}
@media screen and (max-width:767px) {
    .splash-screen__content {
        max-width: 100%;
    }
}

/* 共通のロゴスタイル */
.splash-screen__logo-initial,
.splash-screen__logo-small,
.splash-screen__logo-final {
    position: absolute;
    transition: opacity 1s ease-in;
    z-index: 10;
}

/* 最初から表示される画像 */
.splash-screen__logo-initial {
    max-width: 536px;
    width: 90%;
    opacity: 1;
}

/* 4つの画像 */
.splash-screen__logo-small {
    opacity: 0; /* 最初は非表示 */
}

.splash-screen__logo-small--1 {
    width: 100%;
}
@media screen and (min-width:768px) {
    .splash-screen__logo-small--1 {
        max-width: 357px;
        top: 115px;
        left: 10%;
    }
}
@media screen and (max-width:767px) {
    .splash-screen__logo-small--1 {
        max-width: 332px;
        top: 60px;
    }
}

.splash-screen__logo-small--2 {
    width: 100%;
}
@media screen and (min-width:768px) {
    .splash-screen__logo-small--2 {
        max-width: 137px;
        top: 180px;
        right: 15%;
    }
}
@media screen and (max-width:767px) {
    .splash-screen__logo-small--2 {
        max-width: 120px;
        top: 200px;
        left: calc(50% + 50px);
    }
}

.splash-screen__logo-small--3 {
    width: 100%;
}
@media screen and (min-width:768px) {
    .splash-screen__logo-small--3 {
        max-width: 138px;
        bottom: 180px;
        right: 0;
    }
}
@media screen and (max-width:767px) {
    .splash-screen__logo-small--3 {
        max-width: 138px;
        top: 540px;
        right: 10px;
    }
}

.splash-screen__logo-small--4 {
    width: 100%;
}
@media screen and (min-width:768px) {
    .splash-screen__logo-small--4 {
        max-width: 137px;
        top: 350px;
        left: 0;
    }
}
@media screen and (max-width:767px) {
    .splash-screen__logo-small--4 {
        max-width: 134px;
        top: 510px;
        left: 10px;
    }
}

.splash-screen__logo-small--5 {
    width: 100%;
}
@media screen and (min-width:768px) {
    .splash-screen__logo-small--5 {
        max-width: 105px;
        top: 50px;
        left: calc(25% + 90px);
    }
}
@media screen and (max-width:767px) {
    .splash-screen__logo-small--5 {
        max-width: 78px;
        top: 15px;
        left: calc(50% + 50px);
    }
}

/* 最後に表示される画像 */
.splash-screen__logo-final {
    width: 100%;
    opacity: 0; /* 最初は非表示 */
}
@media screen and (min-width:768px) {
    .splash-screen__logo-final {
        max-width: 319px;
    }
}

@media screen and (max-width:767px) {
    .splash-screen__logo-final {
        max-width: 289px;
        top: 300px;
    }
}


/* アニメーション用のクラス */
.is-visible {
    opacity: 1;
}

.is-invisible {
    opacity: 0;
}

.splash-screen--fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}