@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 必要な場合にコードを追加 */

/************************************
** オープニング動画関連のスタイル
************************************/
/* 
  このセクションは、トップページ専用オープニング動画のスタイルを管理します。
  将来的にオープニング動画を削除する場合は、このセクション全体を削除してください。
*/

#video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white; /* 背景色を白に設定 */
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    z-index: 9999;
    overflow: hidden;
}

#video-overlay video {
    max-width: 100%; /* 動画が横幅いっぱいになるよう設定 */
    max-height: 100%; /* 動画が縦幅いっぱいになるよう設定 */
    object-fit: contain; /* アスペクト比を維持して、収まるように表示 */
}

/* 横長のモニタ（アスペクト比が16:9以上）で動画を小さくする */
@media screen and (min-aspect-ratio: 16/9) {
    #video-overlay video {
        max-width: 80%; /* 横幅を80%に制限 */
        max-height: 80%; /* 縦幅も80%に制限 */
    }
}

/* 画面幅が1023px以下のとき */
@media screen and (max-width: 1023px) {
    #video-overlay video {
        max-width: 90%; /* 横幅を90%に拡大 */
        max-height: 90%; /* 縦幅も90%に拡大 */
    }
}

/* 画面幅が834px以下のとき */
@media screen and (max-width: 834px) {
    #video-overlay video {
        max-width: 100%; /* 横幅を100%にする */
        max-height: 100%; /* 縦幅も100%にする */
    }
}

/* 画面幅が480px以下のとき（スマートフォン） */
@media screen and (max-width: 480px) {
    #video-overlay video {
        max-width: 100%; /* 横幅を画面いっぱいに */
        max-height: 100%; /* 縦幅も画面いっぱいに */
    }
}

/************************************
** オープニング動画関連のスタイル終了
************************************/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 必要に応じて、他のレスポンシブスタイルをここに追加 */