html, body {
  background-color: #ffffff !important; /* 背景を白に固定 */
  color: #000000 !important; /* 文字色も黒に固定 */
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 9em; /* 必要に応じて間隔を調整 */
  flex-wrap: wrap;
  margin: 1em 0;
}

.form-button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #4CAF50; /* 緑（参加） */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* 参加申し込み（緑） */
.form-button.green {
  background-color: #4CAF50;
}

.form-button.green:hover {
  background-color: #4CAF50;
}

/* 講演申し込み（紫） */
.form-button.purple {
  background-color:  #9575cd;
}

.form-button.purple:hover {
  background-color: #9575cd;
}

p {
  font-weight: 500;  /* 数字は 100（細）〜900（太）で指定 */
}
       video {
            
            top: 0;
            left: 50;
            width: 100%; /* ウィンドウの幅に合わせる */
            height: 100%; /* ウィンドウの高さに合わせる */
            object-fit: cover; /* 動画のアスペクト比を保ちながら全体をカバー */
 max-width: 800px; /* 動画の最大幅を元の動画サイズに合わせる */
  justify-content: center; /* 水平方向の中央揃え */
     display: flex;
      justify-content: center; /* 中央揃え */
      align-items: center; /* 縦方向の中央揃え（必要なら） */
        }

  .video-container {
      display: flex;
      justify-content: center; /* 中央揃え */
      align-items: center; /* 縦方向の中央揃え（必要なら） */
    }

img {
 display: block;
  width: 100%;        /* 画面幅に合わせて調整 */
/*  max-width: 800px;    最大幅を指定 */
max-width: none; 
  height: auto;       /* アスペクト比を維持 */
}

.full-width-img {
  width: 100vw;  /* ビューポート（ウィンドウ）の幅に合わせる */
  height: auto;  /* 縦横比を維持 */
  display: block; /* 不要な余白を消す */
}

 .image-container {

width:100%;
margin: 0; 
padding: 0; 
    }

    /* 画像自体のスタイル */
    .image-container img {
      width: 100%;
      max-width: none; /* 必要に応じて調整 */
      height: auto;
    }

    /* 隠しボタンのスタイル */
    .hidden-button {
      position: absolute;
      top: 81.5%; /* 画像の特定の位置 (縦方向) */
      left: 58%; /* 画像の特定の位置 (横方向) */
      width: 10px; /* ボタンの横幅 */
      height: 10px; /* ボタンの高さ */
   
      border: none;
      cursor: pointer;
      display: none; /* 完全に隠すなら「display: none;」にする */
	opacity: 0;
    }

   /* ホバー時にボタンを表示する例 */
    .image-container:hover .hidden-button {
      display: block; /* ホバー時にボタンを表示 */
 
    }

  header {
  flex-direction: column; /* 縦に並べる */
      justify-content: center;
      align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
   }

 h1 {
font-size: 50px;
      margin-bottom: 1px; /* 動画との間にスペース */
    }

 main {
      display: flex;
      flex-direction: column; /* 縦に並べる */
      align-items: center;    /* 中央揃え */
      text-align: center;     /* 中央揃え */
      padding: 20px;
    }

    main h2 {
      font-size: 1.8em;
      margin-bottom: 20px; /* コンテンツとの間にスペース */
    }

    main p {
      font-size: 1.2em;
      max-width: 800px; /* 文章の幅を制限 */
    }