/* オープニングムービー用スタイル */

/* フロントページでのヘッダー初期非表示（JavaScriptによる制御前） */
body.home .top_main_inner,
body.home #header,
body.home header,
body.home #footer,
body.home footer,
body.home nav,
body.home main {
    visibility: hidden;
}

/* JavaScriptロード完了後の表示制御 */
body.opening-ready:not(.opening-active) .top_main_inner,
body.opening-ready:not(.opening-active) #header,
body.opening-ready:not(.opening-active) header,
body.opening-ready:not(.opening-active) #footer,
body.opening-ready:not(.opening-active) footer,
body.opening-ready:not(.opening-active) nav,
body.opening-ready:not(.opening-active) main {
    visibility: visible;
}

#opening-movie {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#opening-logo {
    width: 220px;
    height: auto;
    opacity: 0;
    overflow: visible; /* SVGの枠外も表示できるように */
}

#opening-logo svg {
    overflow: visible; /* SVG要素の枠外も表示 */
    width: 100%;
    height: auto;
}

#opening-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
}

/* メインコンテンツを隠すためのクラス */
.opening-active {
    overflow: hidden;
}

/* オープニング再生中は全てのメインコンテンツを非表示 */
.opening-active .top_main_inner,
.opening-active #header,
.opening-active header,
.opening-active #footer,
.opening-active footer,
.opening-active nav,
.opening-active main {
    visibility: hidden;
}

/* レスポンシブ対応：スマホ・タブレット用 */
@media screen and (max-width: 768px) {
    #opening-video {
        object-fit: cover; /* cover / contain / fill から選択 */
        object-position: 23% top; /* 左から23%の位置、上端に配置 */
    }
    
    #opening-logo {
        width: 180px; /* スマホ用にロゴサイズ調整 */
    }
}

@media screen and (max-width: 480px) {
    #opening-video {
        object-fit: cover;
        object-position: 23% top; /* より小さなスマホでも23%に統一 */
    }
    
    #opening-logo {
        width: 150px; /* より小さなスマホ用 */
    }
}