@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo {
  text-align: left;
}

/* Heroセクションの左右20pxの余白を強制的に突き破る */
.wp-block-cover, .wp-block-awb {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
	margin-top:0px !important;

}


/* スマホ（画面幅767px以下）の時だけ、動画エリアを縦長（9:16）に強制固定 */
@media screen and (max-width: 767px) {
    /* 標準のカバーブロックを使用している場合 */
    .wp-block-cover, 
    .wp-block-cover-image {
        aspect-ratio: 9 / 16 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* プラグイン（AWB）を使用している場合 */
    .wp-block-awb {
        aspect-ratio: 9 / 16 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .wp-block-awb .nk-awb-wrap,
    .wp-block-awb video {
        height: 100% !important;
    }
}


/* PC：横長のままで表示 */
.responsive-crop-video {
    width: 100%;
    max-width: 1000px; /* お好みの最大横幅に調整してください */
    margin: 0 auto;
}
.responsive-crop-video video {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* スマホ（画面幅767px以下）：縦長に枠を固定し、中央をトリミング */
@media screen and (max-width: 767px) {
    .responsive-crop-video {
        width: 100%;
        max-width: 100%;
    }
    .responsive-crop-video video {
        width: 100% !important;
        height: 500px !important; /* スマホ時の動画表示の高さ（縦幅） */
        object-fit: cover;       /* 横長動画の左右をカットして中央を合わせる */
        object-position: center;  /* トリミングの基準を中央にする */
    }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}