*, *::before, *::after {
    box-sizing: border-box;
  }
  
  
  body {
    font-family: 'Poppins', sans-serif;
    color: #4f4f4f;
    margin: 0;
    padding-top: 100px;
    box-sizing: border-box;
  }
  
  .container {
    max-width: 1200px;  /* ページの幅を制限（PC用） */
    margin: 0 auto;     /* コンテナを中央に配置 */
    padding: 0 20px;    /* コンテナ内に余白を設ける */
  }
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white; /* 背景色を設定して他のコンテンツとの重なりを防ぐ */
    z-index: 1000; /* 他の要素よりも前面に表示させる */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 見栄えを良くするためにシャドウを追加 */
  }
  
  h2 {
    color: #522886;
    font-size: 50px;
    border-bottom: 1px solid #B48BDB;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
  }
  
  section {
    text-align: center;
    margin: 100px 0;
  }
  
  ul {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;       /* リスト全体の余白をリセット */
    margin: 20px auto; /* 上下に余白を設けて、中央に配置 */
    max-width: 600px; /* リストの最大幅を設定 */
  }
  
  li {
    margin-bottom: 15px; /* リストアイテムごとの余白を設定 */
    text-align: center; /* リスト内のテキストを中央揃え */
  }
  
  li a {
    text-decoration: none;
  }
  
  .responsive-logo {
    max-width: 100px; /* 最大幅を指定 */
    height: auto; /* アスペクト比を維持しながら高さを自動調整 */
  }
  
  .responsive-main-logo {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: slideInFromLeft 1s ease-out; /* 横からフェードイン */
  }
  
  .header-container {
    display: flex;
    align-items: center;  /* ロゴとメニューを縦方向で中央揃え */
    justify-content: space-between; /* ロゴとメニューを左右に配置 */
    padding: 5px 40px;  /* 少し余白を追加してデザインを整える */
  }
  
  .hamburger-menu {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .menu {
    display: flex;
    padding: 0;
    margin: 0;
  }
  
  .menu li {
    margin-left: 20px;
  }
  
  .menu li:first-child {
    margin-left: 0;
  }
  
  .top-section {
    font-size: 24px;
    margin: 0;
    padding: 0;
  }
  
  .news-list {
    text-align: center;
  }
  
  .subtitle {
    display: block; /* ブロック表示にすることで、見出しの下に揃える */
    font-size: 0.3em;
    font-weight: normal;
    margin-top: 5px; /* 必要に応じて調整 */
    margin-bottom: 10px; /* 次の要素との間の隙間を調整 */
  }
  
  .rights {
    text-align: center;
    color: #522886;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  /* アニメーションを定義 */
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%); /* 左側から開始 */
      opacity: 0; /* 非表示状態 */
    }
    100% {
      transform: translateX(0); /* 元の位置に移動 */
      opacity: 1; /* 完全に表示 */
    }
  }
  
  
  /* タブレットサイズ（768px以下） */
  @media (max-width: 768px) {
    h2 {
      font-size: 20px;
    }
  
    .top-section {
      font-size: 20px;
      margin: 0;
      padding: 0;
    }
  
    .hamburger-menu {
      display: block; /* ハンバーガーメニューを表示 */
      margin-left: auto;
    }
  
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒いオーバーレイ */
      z-index: 998; /* メニューの下に配置 */
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none; /* 初期状態ではクリック不可 */
    }
    
    .overlay.open {
      opacity: 1;
      pointer-events: all; /* メニューが開いたときのみクリックを有効に */
    }
  
    .menu {
      position: fixed; /* 固定して常に画面の右から出す */
      top: 0;
      right: -100%; /* メニューを画面の外側に配置 */
      width: 50%; /* メニューの幅（必要に応じて調整） */
      height: 100%;
      background-color: white;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding-top: 60px;
      transition: right 0.5s, opacity 2s ease; /* アニメーションでスライドインとフェードインを設定 */
      opacity: 0; /* 初期状態では非表示 */
      z-index: 999; /* 他の要素よりも前面に表示 */
    }
  
    .menu.open {
      right: 0; /* メニューを画面内にスライドイン */
      opacity: 1; /* 開いたときにフェードイン */
    }
  
    .menu li {
      margin: 15px 0; /* メニューアイテム間の余白 */
    }
  
    .responsive-logo {
      max-width: 150px; /* ロゴサイズを調整して大きく表示 */
      height: 80px;
    }
  
    .header-container {
      flex-direction: row; /* 横並びに設定 */
      align-items: center; /* ロゴとハンバーガーメニューを縦方向中央揃え */
      justify-content: space-between;
      padding:10px 20px; /* スマホ向けに余白をさらに調整 */
    }
  
    body {
      padding-top: 70px; /* ヘッダーの高さが異なる場合、余白を調整 */
    }
  }
  
  /* スマホサイズ（480px以下） */
  @media (max-width: 480px) {
    body {
      padding-top: 60px; /* スマホ用にヘッダーの高さに応じた余白を設定 */
    }
  
    .responsive-logo {
      max-width: 120px; /* ロゴをさらに大きく表示する */
    }
  
    .header-container {
      padding: 0 20px; /* スマホ向けの余白調整 */
    }
  
    .menu {
      margin-top: 10px; /* メニューに上下の余白を追加 */
    }
  }