/* スマホ用スタイル 改善版 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    font-family: "Meiryo", "Meiryo UI", sans-serif;
    background-color: #00B0F0;
    font-size: 16px;
    overflow-x: hidden;
    position: relative;
}

/* レイアウト全体 */
.relative {
    position: relative;
    width: 100%;
    min-height:720px;
    overflow: hidden;
}

/* 背景画像共通 */
.BG0, .BG1, .BG2, .BG3, .BG4_JP, .BG4_EN {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* 各画像の指定 */
.BG0 { background-image: url(../images/bg00_sp.png); }
.BG1 { background-image: url(../images/bg01_sp.png); }
.BG2 { background-image: url(../images/bg02_sp.png); }
.BG3 { background-image: url(../images/bg03_sp.png); }
.BG4_JP { background-image: url(../images/bg04_jp_sp.png); }
.BG4_EN { background-image: url(../images/bg04_en_sp.png); }

/* フェードイン */
.fade-in {
    opacity: 1 !important;
    visibility: visible !important;
}
.BG1, .BG2, .BG3, .BG4_JP, .BG4_EN {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out;
}

/* アニメーション */
@keyframes floatScale {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.fuwa-fuwa {
    animation: floatScale 4s ease-in-out infinite;
    transform-origin: center;
    animation-delay: 3s;
}

/* Meta Quest ロゴ */
.quest_Top {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 120px;
    z-index: 1000;
}
.quest_Top img {
    width: 100%;
}

/* Language 切り替え */
.lang_Top {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    z-index: 1000;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
.lang_Top img {
    width: 20px;
    vertical-align: middle;
    margin-right: 4px;
}

/* フッター全体 */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
    margin-top: 10px; /* ← .relative と隙間が空かないように */
}

/* 各要素：中央寄せ・スマホ向けサイズ */
.comingsoon img {
    width: 40%;
    max-width: 100%;
    height: auto;
    margin-bottom: 0px;
    margin-right: 100px;

}

.date {
    font-size: 40px;
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
    filter: drop-shadow(1px 1px 2px #000);
}

.HPlogo {
    margin-bottom: 0px;
    margin-top: 20px;
}
.HPlogo img {
    width: 140px;
}

.copy {
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    max-width: 90%;
}