@charset "UTF-8";
   /* 
      1. ヘッダー全体の設定 (配置の基準)
    */
    .header {
      position: relative; /* 子要素を絶対配置するための基準となる */
      width: 100%;
      height: 100vh;      /* 画面（ビューポート）の高さ100%に設定 */
      overflow: hidden;   /* 動画がはみ出した部分を隠す */
      background-color: #000; /* 動画が読み込まれるまでの背景色 */
    }

    /* 
      2. 背景動画の設定
    */
    .header-video {
      position: absolute;
      top: 50%;
      left: 50%;
      /* 縦横の中央に配置し、動画の中央と画面の中央を合わせる */
      transform: translate(-50%, -50%); 
      
      /* 動画の縦横比を維持したまま、ヘッダー領域を完全に覆うように拡大縮小 */
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      
      /* 動画の後ろに配置 */
      z-index: 1; 
      
      /* 動画がクリックされないようにする（オプション） */
      pointer-events: none;
    }

    /* 
      3. コンテンツ（テキストなど）を中央に配置する設定
    */
    .header-inner {
      position: relative; /* .header-video(z-index: 1) の上に重ねるために必要 */
      z-index: 2;         /* 動画より前面に表示 */
      
      /* Flexboxを使って上下左右の中央に配置 */
      display: flex;
      justify-content: center;
      align-items: center;
      
      width: 100%;
      height: 100%; /* .headerと同じ高さ(100vh)にする */
      
      /* 視認性向上のための半透明の黒いオーバーレイ（お好みで調整・削除） */
    }



    /* スマホ用の調整（画面幅が768px以下の場合） */
    @media (max-width: 768px) {
      .header-title {
        font-size: 4rem;
        padding: 0 20px;
      }
    }